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

附

参考文档

• Selectors Level 3
• Selectors Level 4