CSS 选择器
选择器类型
基本选择器
-
基础选择器
-
通配选择器
*
通常不建议使用通配选择符,因为它会遍历并命中文档中所有的元素,出于性能考虑,需酌情使用
-
类选择器
.class
多类选择器,如:
.class1.class2
,匹配同时拥有.class1
和.class2
两个类的元素。
需要注意的是IE6并不支持多类选择符,如:.a.b{}
将会被视为:.b{}
-
ID选择器
#id
-
元素选择器
E
-
-
关系选择器
-
后代选择器
E F
-
子代选择器
E > F
与后代选择器不同的是,子代选择器只能匹配子元素,而不能匹配孙辈。
-
相邻选择器
E + F
相邻选择器,选择紧随其后的一个元素
-
兄弟选择器
E ~ F
兄弟选择器,选择紧随其后的所有兄弟元素
-
属性选择器
-
E[attr]
用于选取带有指定属性的元素。a[href][title] /* 匹配同时含有属性 href , title 的标签 a */
-
E[attr="value"]
用于选取带有指定属性和值的元素。 -
E[attr*="value"]
匹配属性值中包含指定值的每个元素。 -
E[attr~="value"]
用于选取属性值中包含指定词汇的元素。此属性值是一个词列表,并且以空格隔开。 -
E[attr^="value"]
匹配属性值以指定值开头的每个元素。 -
E[attr$="value"]
匹配属性值以指定值结尾的每个元素。 -
E[attr|="value"]
选择具有attr
属性且属性值为以value
开头并用连接符-
分隔的字符串的E元素,如果属性值仅为value
,也将被选择。/* 等价于 */ E[attr="value"], E[attr=^"value-"]
伪类选择器
-
链接伪类
:link
:visited
:hover
:active
遵循顺序:
:link
,:visited
,:hover
,:active
。快捷记忆:love
,hate
-
UI状态伪类
:disabled
:enabled
:checked
:focus
-
结构性伪类
-
:first-child
选择某个元素的第一个子元素。 -
:last-child
选择某个元素的最后一个子元素。 -
:only-child
选择某个元素的唯一子元素。 -
:nth-child()
选择某个的一个或多个特定的子元素。 -
:nth-last-child()
与:nth-child()
不同在于,:nth-last-child()
从后面计算。:nth-child(n) /* 参数是n,n从0开始计算 */ :nth-child(n*length) /* n的倍数选择,n从0开始算,length为整数 */ :nth-child(n+length) /* 选择大于length后面的元素 */ :nth-child(-n+length) /* 选择小于length前面的元素 */ :nth-child(n*length+1) /* 表示隔几选一 */
-
:first-of-type
-
:last-of-type
-
:only-of-type
-
:nth-of-type()
-
:nth-last-of-type()
:nth-of-type()
与:nth-child()
的差别在于:nth-child()
计算的是子元素,:nth-of-type()
计算的是标签类型。.box .item:nth-of-type(2n) { color: #f00; }
:nth-of-type()
即使前面的选择器是.class
,也会找到对应的标签类型,再进行计算。如针对如下结构:
<div class="box"> <p>item</p> <p class="item">item</p> <p class="item">item</p> <div class="item">item</div> <div class="item">item</div> </div>
上诉样式等价于:
.box p:nth-of-type(2n), .box div:nth-of-type(2n) { color: #f00; }
-
:empty
匹配没有任何内容的元素。 -
:not(s)
:not(s)
的参数可以是除自身之外的简单选择器 (基本选择器,属性选择器,伪类选择器)。
部分不常用伪类选择不做介绍,具体详见 Selectors Level 3
-
伪元素选择器
::first-line
为某个元素的第一行文字使用样式。::first-letter
为某个元素中的文字的首字母或第一个字使用样式。::before
用来给元素的前面插入内容,这两个常用content
配合使用。::after
用来给元素的后面插入内容,这两个常用content
配合使用。::selection
用来改变浏览网页选中文的默认效果。
选择器优化
匹配原则
浏览器读取选择器的顺序是由右到左进行的。如选择器 .box a
,浏览器在遍历页面中所有a
元素后还需向其上级遍历直到根节点,直到找到.list
。
-
CSS选择器的效率
一般来说,CSS选择器的效率从高到底排序如下。- ID选择器
- 类选择器
- 元素选择器
- 兄弟选择器
- 子选择器
- 后代选择器
- 通用选择器
- 属性选择器
- 伪类/伪元素选择器
优化建议
-
书写高效率的CSS选择器
- 不要在ID选择器前加标签名或类名
- 不要在类名选择器前加标签名
- 尽可能使用具体的类别
-
出于项目可维护性考虑
- 非必要情况只使用类选择器
样式优先级
优先级是决定不同选择器的相同样式规则对同一元素的生效情况,优先级高的将覆盖优先级低的样式规则。在确定样式优先级时,考虑顺序如下:
-
!important
-
行内样式
-
文档后面样式覆盖文档前面样式
-
选择器优先级
-
ID选择器
-
类选择器、属性选择器、伪类选择器
-
元素选择器、伪元素选择器
-
通配符、
:not()
选择器类型相同时,优先级取决选择器个数。
-
CSS4选择器前瞻
主要了解部分2013年工作草案中新增且在后续的2016年编者草案中未被移除的CSS4选择器。
W3C标准衍生过程:编者草案 > 工作草案 > 最终工作草案 > 候选推荐标准 > 推荐标准
- :not(s1, s2)
否定伪类选择器,选取不需要运用CSS的元素。支持参数列表。效果等价:not(s1):not(s2)
。
这里说的效果等价不包括优先级。
- :matches(s1, s2)
将样式运用给一组选择器。匹配符合参数选择器中任一一个元素。
p:matches(.alert, .error, .warn){}
/*等价于*/
p.alert,p.erroe,p.warn{}
这里的等价,包括优先级
E[foo="bar" i]
属性选择器不区分大小写匹配标识。同样适用其他属性选择器。
:dir( ltr / rtl )
:dir
伪类区分文本显示方向。该伪类匹配的是有dir
属性的元素,而并非样式。
:any-link
统一设置链接各种状态。:link
,:visited
检查href
属性值是否被访问。:any-link
同样检查href
属性,当然也是针对应该有href
属性的元素。
:placeholder-shown
:placeholder-shown
匹配 placeholder文字显示时的 <input>
元素。
::-webkit-input-placeholder
,::-moz-placeholder
,:-ms-input-placeholder
匹配的内容是placeholder
。
:blank
和:empty
类似,区别在于:empty
只能匹配没有任何内容的元素,而:blank
可以匹配带有spaces
(空格),tabs
(缩进符) and segment breaks
(段落过段)内容的元素。
详细内容详见:Selectors Level 4