1.选择器类型
选择器：让你找到页面上的对应元素
1）基础选择器
| 选择器 | 含义 |
|---|---|
| * | 通用元素选择器，匹配页面任何元素（这也就决定了我们很少使用） |
| #id | id选择器，匹配特定id的元素 |
| .class | 类选择器，匹配class包含(不是等于)特定类的元素 |
| element | 标签选择器 |
-
通用选择器
*通用选择器
加边框
PS： * 通用选择器将页面所有元素选中 -
id选择器
id选择器
PS：注意id和class的区别，都是用来标记元素，id用来标记页面上独一无二的元素，所以页面上不要出现一样的id；class用来标记某一类元素
类选择器&标签选择器
类&标签
2）组合选择器（将基础选择器组合起来使用，注意写法与基础选择器一致）
jsbin中css快捷注释键：ctrl+/
| 选择器 | 含义 |
|---|---|
| E,F | 多元素选择器，用,分隔，同时匹配元素E或元素F |
| E F | 后代选择器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下递归）元素F |
| E>F | 子元素选择器，用>分隔，匹配E元素的所有直接子元素 |
| E+F | 直接相邻选择器，匹配E元素之后的相邻的同级元素F |
| E~F | 普通相邻选择器（弟弟选择器），匹配E元素之后的同级元素F（无论直接相邻与否） |
| .class1.class2 | id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素 |
| element#id | id和class选择器和选择器连写的时候中间没有分隔符，. 和 # 本身充当分隔符的元素 |
E,F：同时选中EF两个元素
并列
并列
E F：中间有个空格，选中的后代下嵌套的元素也会被选中
E F
E>F：注意与E F的区别
E>F
E+F
E+F
E~F：选中E后面的所有邻居元素
E~F
.class1.class2
既又
3）属性选择器
| 选择器 | 含义 |
|---|---|
| E[attr] | 匹配所有具有属性attr的元素，div[id]就能取到所有有id属性的div |
| E[attr = value] | 匹配属性attr值为value的元素，div[id=test],匹配id=test的div |
| E[attr ~= value] | 匹配所有属性attr具有多个空格分隔、其中一个值等于value的元素 |
| E[attr ^= value] | 匹配属性attr的值以value开头的元素 |
| E[attr $= value] | 匹配属性attr的值以value结尾的元素 |
| E[attr $= value] | 匹配属性attr的值以value结尾的元素 |
| E[attr *= value] | 匹配属性attr的值包含value的元素 |
属性选择器
4）伪类选择器（选择的是一种状态，不是一种元素，例如鼠标停留在连接上）
写CSS不直接使用标签选择器，为什么？
伪类选择器
伪类选择器
selection：例如复制文字时的选择
focus：例如点击一个输入框，输入光标闪烁状态，即为焦点状态
鼠标停留
样式覆盖问题
样式覆盖问题
样式覆盖解决
nth-of-type
nth-of-type
nth-of-type
- n的取值
- 1，2，3，4，5
- 2n+1（奇数）, 2n（偶数）, 4n-1（奇数）（例如，奇数行一种效果，偶数行一种效果）
- odd, even
5）伪元素选择器
| 选择器 | 含义 |
|---|---|
| E::first-line | 匹配E元素内容的第一行 |
| E::first-letter | 匹配E元素内容的第一个字母 |
| E::before | 在E元素之前插入生成的内容 |
| E::after | 在E元素之后插入生成的内容 |
对于伪元素，一定要有content？
PS：图中的before和after分别在wrap元素下将aa和bbb作为第一个和最后一个子元素插入
2.选择器优先级
如果多条规则作用于同一个元素上，且定义的相同属性的不同值，比如
<style>
#test {color: #666;}
p {color: #333;}
</style>
<p id="text">Text</p>
这种场景下，p元素文本颜色应该是哪个呢？
优先级，从高到低为：
1）在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式
2）作为style属性写在元素标签上的内联样式
3）id选择器
3）类选择器
4）伪类选择器
5）属性选择器
6）标签选择器
7）通配符选择器
8）浏览器自定义
举例
复杂场景
复杂场景判断选择器优先级
1.将各种选择器分为abcd4类
对比
2.对比abcd中的个数判断优先级
样式覆盖
下面的会覆盖上面的
image.png
3.选择器使用经验
遵守书写规范
-
使用合适的命名空间
合适的命名空间 -
合理的复用class
复用class
