CSS3 选择器

发表于 | 更新于 | 分类于

CSS 样式的语法总是遵循如下格式：

1
2
3
4
Selector{
    property1:value;
    property2:value;
}

属性选择器

  • E{ …} ：指定该 CSS 样式对所有 E 元素起作用（即元素选择器）。
  • E[attr]{…}：指定该 CSS 样式对具有 attr 属性的 E 元素起作用。
  • E[attr=value]{…}：指定该 CSS 样式对所有包含 attr 属性，且 attr 属性为 value 的 E 元素起作用。
  • E[attr~=value]{…}：指定该 CSS 样式对所有包含 attr 属性，且 attr 属性的值为以空格隔开的系列值，其中某个值为 value 的 E 元素起作用。
  • E[attr|=value]{…}：指定该 CSS 样式对所有包含 attr 属性，且 attr 属性的值为以连字符分隔的系列值，其中第一个值为 value 的 Tag 元素起作用。
  • E[attr^=”value]{…}：指定该 CSS 样式对所有包含 attr 属性，且 attr 属性的值为以 value 开头的字符串的 E 元素起作用。
  • E[attr$=”value”]{…}：指定该 CSS 样式对所有包含 attr 属性，且 attr 属性的值为以 value 结尾的字符串的 E 元素起作用。
  • E[att*=”value”]{…}：指定该 CSS 样式对所有包含 attr 属性，且 attr 属性的值为包含 value 的字符串的 E 元素起作用。

上面这几个选择器匹配规则越严格优先级越高。

ID 选择器

ID 选择器指定 CSS 样式将会对具有指定 id 属性值的 HTML 元素起作用：

1
#idValue{...}

仅对指定元素起作用的 ID 选择器：

1
E#idValue{...}

类选择器

类选择器指定 CSS 样式对具有指定 class 属性的元素起作用：

1
[E].classValue{...} /*其中 E 是有效的HTML元素*/

包含选择器

包含选择器用于指定目标选择器必须处于某个选择器对应的元素内部：

1
Selector1 Selector2{...}

如果还希望实现更为精确的选择，例如只对 section 元素下的article 元素下的 h1 元素应用样式：

1
2
3
section article h1{
    font-size:30px;
}

子选择器

子选择器用于指定目标选择器必须是某个选择器对应的子元素：

1
Selector1>Selector2{...}

包含选择器与子选择器十分相似，它们之间存在如下区别：对于包含选择器，只要目标选择器位于外部选择器对应的元素内部，即使是 “孙子元素” 也可以；对于子选择器，要求目标选择器必须作为外部选择器对应的元素的直接子元素才可以。

兄弟选择器

兄弟选择器是 CSS 3.0 新增的一个选择器：

1
Selector1 ~ Selector2{...}

兄弟选择器匹配与 Selector1 对应的元素后面、能匹配 Selector2 的兄弟节点。

示范：

1
2
3
4
5
6
7
8
9
10
11
12
13
<style type="text/css">
    //匹配 id 为 android 的元素后面、class 属性为 long 的兄弟节点
    #android ~ .long {
    background-color: #00FF00;
}
</style>

<body>
    <div class="long"></div>//不被匹配
    <div id="android"></div>
    <div class="long"></div>//被匹配
    <p class="long"></p>//被匹配
</body>

CSS 中还有多种基于关系的选择器，如 a > b 表示选择任何 a 元素的子元素 b，a + b 表示任何 a 元素的下一个 b 元素，a:first-child 表示任何 a 元素的第一个子元素。

选择器组合

如果想让一份 CSS 样式对多个选择器起作用，可以利用选择器组合来实现：

1
Selector1,Selector2,Selector3,...{...}

对于上面的组合选择器，{…} 中定义的 CSS 样式将会对前面列出的所有选择器匹配出的元素起作用。

伪元素选择器

伪元素并不是针对真正的元素使用的选择器，而是对元素中的特定内容进行操作。设计伪元素的目的就是去选取诸如元素内容第一个字(母)、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

CSS 提供的伪元素有如下几个：

  • :first-letter：对指定对象内的第一个字符起作用。注意 :first-letter 选择器仅对块元素起作用
  • :first-line：对指定对象内的第一行内容起作用。仅对块元素起作用
  • :before：在指定对象内部的前端插入内容。
  • :after：在指定对象内部的尾端插入内容。
1
2
3
4
5
6
7
8
<style type="text/css">
span{
  display:block;
}
span:first-letter{
  color:red;
  font-size:20pt;
}

内容相关的属性

这里的内容相关的属性，与 CSS 属性中 color、font-size 等属性本质是相同的。这些内容相关的属性同样需要定义在 CSS 样式的花括号里面。

CSS 支持的内容相关的属性有：

  • include-source：该属性的值应为 url(url)，插入绝对或相对 URL 地址所对应的文档。
  • content：核心，该属性的值可以是字符串、url(url)、attr(alt)、counter(name)、counter(name，list-style-type)、open-quote、close-quote 等格式。该属性用于向指定元素之前或之后插入指定内容。
  • quotes：该属性用于为 content 属性定义 open-quote 和 close-quote，该属性的值可以是两个以空格分隔的字符串，其中前面的字符串是 open-quote，后面的字符串是 close-quote。
  • counter-increment：该属性用于定义一个计数器。该属性的值就是所定义的计数器的名称。
  • counter-reset：该属性用于对指定的计数值复位。

插入图像

content 属性的值除了支持普通字符串之外，还可以使用 url(url) 格式的值，用于插入图像。

只插入部分元素

有些时候，并不需要为元素的前、后插入内容，只需要向部分元素的前、后插入内容即可。可以在使用 :before、:after 伪元素选择器之前使用更严格的 CSS 选择器。

配合 quotes 属性执行插入

使用 quotes 属性可以定义 open-quote 和 close-quote，然后就可以在 content 属性中应用 quotes 属性所定义的 open-quote 和 close-quote。

1
2
3
4
5
6
7
8
9
div>div{
  quotes: "<<",">>";
}
div>div:before{
  content:open-quote;
}
div>div:after{
  content:close-quote;
}

配合 counter-increment 属性添加编号

当需要为多条内容添加编号时，可以通过 counter-increment 属性定义计数器，然后通过 content 属性引用计数器即可。counter-increment 属性的值所指定的字符串就是该计数器的名称。

1
2
3
4
5
6
div>div{
  counter-increment:mycounter;
}
div>div:before{
  content:counter(mycounter) '.'；
}

以上添加的编号默认是数值编号。

使用自定义编号

如果想使用自定义的编号，例如罗马字母编号，可以通过 counter(name,list-style-type) 来实现，其中 list-style-type 指定编码风格：

  • decimal：阿拉伯数字。默认值
  • disc：实心圆。
  • circle：空心圆。
  • square：实心方块。
  • lower-roman：小写罗马数字。
  • upper-roman：大写罗马数字。
  • lower-alpha：小写英文字母。
  • upper-alpha：大写英文字母。
  • none：不使用项目符号。
  • cjk-ideographic：浅白的表意数字。
  • georgian：传统的乔治数字。
  • lower-greek：基本的希腊小写字母。
  • hebrew：传统的希伯来数字。
  • hiragana：日文平假名符。
  • hiragana-iroha：日文平假名序号。
  • katakana：日文片假名符。
  • katakana-iroha：日文片假名序号。
  • lower-latin：小写拉丁字母。
  • upper-latin：大写拉丁字母。

添加多级编号

可以通过 CSS 定义多个编号计数器，然后为不同的选择器插入不同的计数器即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//为div的子h2元素定义一个计数器：categorycounter
div>h2{
  conter-increment:categorycounter;
}
//为div的子div定义一个计数器：subcounter
div>div{
  counter-increment:subcounter;
}
div>h2:before{
  content:counter(categorycounter,georigian) '.';
}
div>div:before{
  content:counter:'第' counter(subcounter,cjk-ideographic) '本.';
}

伪类选择器

伪类选择器主要用于对已有选择器做进一步的 限制，对已有选择器能匹配的元素做进一步的过滤。CSS 提供的伪类选择器主要分为 3 类：

  • 结构性伪类选择器
  • UI 元素状态伪类选择器
  • 其他伪类选择器

结构性伪类选择器

结构性伪类选择器指的是根据 HTML 元素之间的结构关键进行筛选的伪类选择器，主要有如下几个：

  • Selector:root：匹配文档的根元素，在 HTML 文档中，跟元素永远是 <html../> 元素。
  • Selector:first-child：匹配符合 Selector 选择器，而且必须是其父元素的第一个子节点的元素。
  • Selector:last-child：匹配符合 Selector 选择器，而且必须是其父元素的最后一个子节点的元素。
  • Selector:nth-child(n)：匹配符合 Selector 选择器，而且必须是其父元素的第 n 个子节点的元素。
  • Selector:nth-last-child(n)：匹配符合 Selector 选择器，而且必须是其父元素的倒数第 n 个子节点的元素。
  • Selector:only-child：匹配符合 Selector 选择器，而且必须是其父元素的唯一子节点的元素。
  • Selector:first-of-type：要求匹配符合 Selector 选择器，而且是与它同类型、同级的兄弟元素中的第一个元素。
  • Selector:last-of-type：要求匹配符合 Selector 选择器，而且是与它同类型、同级的兄弟元素中的最后一个元素。
  • Selector:nth-of-type(n)：要求匹配符合 Selector 选择器，而且是与它同类型、同级的兄弟元素中的第 n 个元素。
  • Selector:nth-last-of-type(n)：要求匹配符合 Selector 选择器，而且是与它同类型、同级的兄弟元素中的倒数第 n 个元素。
  • Selector:only-of-type：要求匹配符合 Selector 选择器，而且是与它同类型、同级的兄弟元素中的唯一一个元素。
  • Selector:empty：匹配符合 Selector 选择器，而且其内部没有任何子元素(包括文本节点)的元素。

上面这些伪类选择器中，前面的 Selector 选择器可以省略，如果省略了该选择器，则 Selector 将不作为匹配条件。

:root 伪类选择器用于匹配 HTML 文档的根元素，根元素只能是 <html…/> 元素。HTML 文档的根元素和 <body…/> 元素表示的范围是不同的。根元素的范围更大，如果没有显式为根元素指定样式，那么 <body…/> 元素的样式将会对整个文档起作用。

:first-child、:last-child、:nth-child、:nth-last-child、:only-child 这组伪类选择器依次要求匹配该选择器的元素必须是其父元素的第一个子节点、最后一个子节点、第 n 个子节点、倒数第 n 个子节点、唯一的子节点。

对于 :nth-child、:nth-last-child 两个伪类选择器，它们的功能更多：

  • Selector:nth-child(odd/event)：匹配符合 Selector 选择器，而且必须是其父元素的第奇数个/偶数个子节点的元素。
  • Selector:nth-last-child(odd/event)：匹配符合 Selector 选择器，而且必须是其父元素的倒数第奇数个/偶数个子节点的元素。
  • Selector:nth-child(xn+y)：匹配符合 Selector 选择器，而且必须是其父元素的第 xn+y 个子节点的元素。
  • Selector:nth-last-child(xn+y)：匹配符合 Selector 选择器，而且必须是其父元素的倒数第 xn+y 个子节点的元素。

:first-of-type、:last-of-type、:nth-of-type、:nth-last-of-type、:only-of-type 这组伪类选择器并不要求它们是其父元素的第一个、最后一个、第 n 个、倒数第 n 个、唯一一个元素。这组伪类选择器只要求它们是与其有共同类型、同级元素的第一个、最后一个、第 n 个、倒数第 n 个、唯一一个元素。

:nth-of-type、:nth-of-last-type 的用法跟 :nth-child、:nth-last-child 类似。

UI 元素状态伪类选择器

UI 元素状态伪类选择器主要用于根据 UI 元素的状态进行筛选。有如下几个：

  • Selector:link：匹配 Selector 选择器且未被访问前的元素(通常只能是超链接)。
  • Selector:visited：匹配 Selector 选择器且已被访问过的元素(通常只能是超链接)。
  • Selector:active：匹配 Selector 选择器且处于被用户激活(在鼠标点击与释放之间的事件)状态的元素。
  • Selector:hover：匹配 Selector 选择器且处于鼠标悬停状态下的元素。
  • Selector:focus：匹配 Selector 选择器且已经得到焦点的元素。
  • Selector:enabled：匹配 Selector 选择器且当前处于可用状态的元素。
  • Selector:disabled：匹配 Selector 选择器且当前处于不可用状态的元素。
  • Selector:checked：匹配 Selector 选择器且当前处于选中状态的元素。
  • Selector:default：匹配 Selector 选择器且页面打开时处于选中状态的元素。
  • Selector:read-only：匹配 Selector 选择器且处于只读状态的元素。
  • Selector:read-write：匹配 Selector 选择器且处于读写状态的元素。
  • Selector::selection：匹配 Selector 选择器的元素中当前被选中的内容。

上面这些伪类选择器中，前面的 Selector 选择器可以省略，如果省略了该选择器，则 Selector 将不作为匹配条件。而且 ::selection 选择器前面有两个冒号。

浏览器专属的属性

有些浏览器会有专属的自行扩展的 CSS 属性，可以在 CSS 属性前增加各自的浏览器前缀，来让这些浏览器识别这些专属属性。

:not 和 :target

CSS3 新增了两个特殊的伪类选择器：

  • Selector:target：匹配符合 Selector 选择器且必须是命名锚点目标的元素。
  • Selector1:not(Selector2)：匹配符合 Selector1 选择器，但不符合 Selector2 选择器的元素，相当于用 Selector1 减去 Selector2。