序号 | 选择器 | 描述 | 举例 |
---|---|---|---|
1 | 元素选择器 | 根据元素标签名称进行匹配 | div {...} |
2 | 群组选择器 | 同时选择多个不同类型的元素 | h1,h2,h3{...} |
3 | 通配选择器 | 选择全部元素,不区分类型 | * {...} |
4 | 属性选择器 | 根据元素属性进行匹配 | *[...] |
5 | 类选择器 | 根据元素 class 属性进行匹配 | *.active {...} |
6 | id 选择器 | 根据元素 id 属性进行匹配 | *#top {...} |
*
“可以省略序号 | 角色 | 描述 |
---|---|---|
1 | 祖先元素 | 拥有子元素,孙元素等所有层级的后代元素 |
2 | 父级元素 | 仅拥有子元素层级的元素 |
3 | 后代元素 | 与其它层级元素一起拥有共同祖先元素 |
4 | 子元素 | 与其它同级元素一起拥有共同父级元素 |
序号 | 选择器 | 操作符 | 描述 | 举例 |
---|---|---|---|---|
1 | 后代选择器 | 空格 |
选择当前元素的所有后代元素 | div p , body * |
2 | 父子选择器 | > |
选择当前元素的所有子元素 | div > h2 |
3 | 同级相邻选择器 | + |
选择拥有共同父级且相邻的元素 | li.red + li |
4 | 同级所有选择器 | ~ |
选择拥有共同父级的后续所有元素 | li.red ~ li |
我们重点放在伪类最重要的应用场景:
场景 | 描述 |
---|---|
结构伪类 | 根据子元素的位置特征进行选择 |
表单伪类 | 根据表单控件状态特征进行选择 |
序号 | 选择器 | 描述 | 举例 |
---|---|---|---|
1 | :first-child |
匹配第一个子元素 | div :first-child |
2 | :last-child |
匹配最后一个子元素 | div :last-child |
3 | :only-child |
选择元素的唯一子元素 | div :only-child |
4 | :nth-child(n) |
匹配任意位置的子元素 | div :nth-child(n) |
5 | :nth-last-child(n) |
匹配倒数任意位置的子元素 | div :nth-last-child(n) |
序号 | 选择器 | 描述 | 举例 |
---|---|---|---|
1 | :first-of-type |
匹配按类型分组后的第一个子元素 | div :first-of-type |
2 | :last-of-type |
匹配按类型分组后的最后一个子元素 | div :last-of-type |
3 | :only-of-type |
匹配按类型分组后的唯一子元素 | div :only-of-type |
4 | :nth-of-type() |
匹配按类型分组后的任意位置的子元素 | div :nth-of-type(n) |
5 | :nth-last-of-type() |
匹配按类型分组后倒数任意位置的子元素 | div :nth-last-of-type(n) |
序号 | 选择器 | 描述 |
---|---|---|
1 | :active |
向被激活的元素添加样式 |
2 | :focus |
向拥有键盘输入焦点的元素添加样式 |
3 | :hover |
当鼠标悬浮在元素上方时,向元素添加样式 |
4 | :link |
向未被访问的链接添加样式 |
5 | :visited |
向已被访问的链接添加样式 |
5 | :root |
根元素,通常是html |
5 | :empty |
选择没有任何子元素的元素(含文本节点) |
5 | :not() |
排除与选择器参数匹配的元素 |
最常见的且频繁使用的选择器是类选择器
光靠一个选择器虽然能够写完所有样式,但是这样会很麻烦,最好的方法就是各种选择器同时使用,可以缩短时间,提高效率。
选择器的优先级
下面列表中,选择器类型的优先级是递增的:
类型选择器(例如,h1)和伪元素(例如,::before)
类选择器 (例如,.example),属性选择器(例如,[type=”radio”])和伪类(例如,:hover)
ID 选择器(例如,#example)。
通配选择符(universal selector)(*)关系选择符(combinators)(+, >, ~, ‘ ‘, ||)和 否定伪类(negation pseudo-class)(:not())对优先级没有影响。(但是,在 :not() 内部声明的选择器会影响优先级)。
给元素添加的内联样式 (例如,style=”font-weight:bold”) 总会覆盖外部样式表的任何样式 ,因此可看作是具有最高的优先级。
!important 例外规则
当在一个样式声明中使用一个 !important 规则时,此声明将覆盖任何其他声明。虽然,从技术上讲,!important 与优先级无关,但它与最终的结果直接相关。使用 !important 是一个坏习惯,应该尽量避免,因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。
一些经验法则:
一定要优化考虑使用样式规则的优先级来解决问题而不是 !important
只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
永远不要在你的插件中使用 !important
永远不要在全站范围的 CSS 代码中使用 !important
与其使用 !important,你可以:
更好地利用 CSS 级联属性
使用更具体的规则。在您选择的元素之前,增加一个或多个其他元素,使选择器变得更加具体,并获得更高的优先级。
<div id="test">
<span>Text</span>
</div>
div#test span { color: green; }
div span { color: blue; }
span { color: red; }
无论 css 语句的顺序是什么样的,文本都会是绿色的(green),因为这一条规则是最有针对性、优先级最高的。(同理,无论语句顺序怎样,蓝色 blue 的规则都会覆盖红色 red 的规则)