选择器类型
- 基础选择器
- 组合选择器
- 属性选择器
- 伪类选择器
- 伪元素选择器
基础选择器
- * ；通用选择器，匹配页面任何元素
- #id；id选择器
- .class；类选择器
- element；标签选择器
组合选择器
- 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[attr]；匹配所有具有属性attr的元素
- 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的元素
伪类选择器
- :hover
- :active
- :visited
- :link
- :checked
- :focus
- :disabled
- :first-child
- :last-child
- :first-of-type
- :last-of-type
- :nth-of-type(n)
伪元素选择器
- E::first-line
- E::first-letter
- E::before
p::before {
content: '**';
color: red;
}
- E::after
选择器优先级
从高到低：
- 在属性后面使用！important会覆盖页面内任何位置定义的元素样式
- 作为style熟悉写在元素标签上的内联样式
- id选择器
- 类选择器
- 伪类选择器
- 属性选择器
- 标签选择器
- 通配符选择器
- 浏览器自定义
- 继承的样式
复杂场景选择器优先级
计算权重
- 行内样式 ==> a
- id选择器 ==> b
- 类、属性、伪类选择器 ==> c
- 标签选择器、伪元素 ==> d
