一、什么是选择器?
根据一定的规则选出符合条件的HTML元素,从而为他们添加各种特定的样式。
二、选择器分类
- 通用选择器
- 元素选择器
- 类选择器
id
选择器- 属性选择器
- 后代选择器
- 兄弟选择器
- 选择器组
- 伪类
三、通用选择器(*
)
作用:帮我们选中所有的元素。
*
就是通配符一样的,它会匹配所有元素。包括html元素
。
一般实际操作中不使用。
因为它会把所有元素都匹配一边,哪怕你的HTML文件中都没有用到的元素。
四、元素选择器
使用元素的名称。
五、类选择器
使用.class名
。也就是:.类名
所有使用这个class名的元素都会有同一个样式。
但是因为css的层叠特性等等,所有不一定是所有的样式会有这个样式,会存在覆盖。
六、id
选择器
使用#id名
。同一个HTML中就一个id。保持唯一性。
七、属性选择器
例子:
八、后代选择器
1、所有后代
例子:
HTML
结构
- 目标:选择
home
下的span
- 结果
1、只有一个后代(直接子代)。
小米网站中的示例:
九、兄弟选择器
例子:
十、选择器组
-
交集选择器
-
并集选择器