当前位置: 首页 > news >正文

【前端基础】8、CSS的选择器

一、什么是选择器?

根据一定的规则选出符合条件的HTML元素,从而为他们添加各种特定的样式。

二、选择器分类

  1. 通用选择器
  2. 元素选择器
  3. 类选择器
  4. id选择器
  5. 属性选择器
  6. 后代选择器
  7. 兄弟选择器
  8. 选择器组
  9. 伪类

三、通用选择器(*

作用:帮我们选中所有的元素。
*就是通配符一样的,它会匹配所有元素。包括html元素
在这里插入图片描述

一般实际操作中不使用。
因为它会把所有元素都匹配一边,哪怕你的HTML文件中都没有用到的元素。

四、元素选择器

使用元素的名称。
在这里插入图片描述

五、类选择器

使用.class名。也就是:.类名
所有使用这个class名的元素都会有同一个样式。
但是因为css的层叠特性等等,所有不一定是所有的样式会有这个样式,会存在覆盖。
在这里插入图片描述

六、id选择器

使用#id名。同一个HTML中就一个id。保持唯一性。

在这里插入图片描述
在这里插入图片描述

七、属性选择器

在这里插入图片描述

例子:
在这里插入图片描述
在这里插入图片描述

八、后代选择器

1、所有后代
在这里插入图片描述

例子:

  1. HTML结构
    在这里插入图片描述
  2. 目标:选择home下的span
    在这里插入图片描述
  3. 结果
    在这里插入图片描述
    1、只有一个后代(直接子代)。
    在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

小米网站中的示例:
在这里插入图片描述

九、兄弟选择器

在这里插入图片描述
例子:
在这里插入图片描述
在这里插入图片描述

十、选择器组

  1. 交集选择器
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

  2. 并集选择器
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

十一、伪类(非常粗略的描述)

  1. 什么是伪类
    选择器的一种,用于选择处于特定状态的元素。
    最常见的现象:鼠标放在某些文字上面,文字就会加上颜色。
    鼠标没放上去之前:
    在这里插入图片描述
    鼠标放上去之后:
    在这里插入图片描述

  2. 常见伪类
    最最常用: :hover ,其他的,需要就查吧。
    在这里插入图片描述
    其他博客1
    其他博客2
    其他博客3

http://www.xdnf.cn/news/340831.html

相关文章:

  • HTML10:iframe内联框架
  • AI时代企业应用系统架构的新思路与CIO变革指南
  • 如何使用极狐GitLab 软件包仓库功能托管 helm chart?
  • 【RAG技术全景解读】从原理到工业级应用实践
  • Redis 8.0正式发布,再次开源为哪般?
  • 基于STM32、HAL库的CP2102-GMR USB转UART收发器 驱动程序设计
  • keep the pipe Just full But no fuller - BBR 与尘封 40 年的求索
  • ETL介绍及kettle等工具学习
  • 科学发现 | 源于生活的启示与突破计划的创新
  • android-ndk开发(9): undefined reference to `__aarch64_ldadd4_acq_rel` 报错分析
  • [数据库之十一] 数据库索引之联合索引
  • 大模型调优方法与注意事项
  • 【Java 专题补充】流程控制语句
  • RPC、gRPC和HTTP的区别
  • Java大师成长计划之第15天:Java线程基础
  • uniapp|实现多终端视频弹幕组件、内容轮询、信息表情发送(自定义全屏半屏切换、弹幕启用)
  • BGP基础
  • 抛物线法(二次插值法)
  • 《AI大模型应知应会100篇》第52篇:OpenAI API 使用指南与最佳实践
  • 65.Three.js案例-使用 MeshNormalMaterial 和 MeshDepthMaterial 创建 3D 图形
  • flutter 的热更新方案shorebird
  • Vue3项目目录重命名指南
  • Kotlin Coroutine与Retrofit网络层构建指南
  • 结合Splash与Scrapy:高效爬取动态JavaScript网站
  • SGLang 实战介绍 (张量并行 / Qwen3 30B MoE 架构部署)
  • C++ set替换vector进行优化
  • OpenCV进阶操作:图像的透视变换
  • LeetCode算法题(Go语言实现)_62
  • numpy pandas
  • 红外遥控与NEC编码协议详解