CSS3之美(二):选择器

CSS3 选择器模块新引入的各种选择器让人目不暇接,这么多丰富的选择器我们一起来认识一下吧

属性选择器

属性选择器是在 CSS2 中引入的,它能根据元素的属性以及这些属性的值对元素进行匹配。CSS2 定义的4个属性选择器如下:

1
2
3
4
5
6
7
8
9
10
11
E[attr] {}
/* 选择具有 attr 属性的 E 元素 */
E[attr="value"] {}
/* 选择属性 attr 值为 value 的 E 元素 */
E[attr~="value"] {}
/* 选择具有 attr 属性且属性值是一用空格分隔的单词列表,其中一个等于 value 的 E 元素(包含只有一个值且该值等于value的情况) */
E[attr|="value"] {}
/* 选择具有 attr 属性且属性值是以 value 开头并用连接符"-"分隔的字符串的 E 元素,如果属性值仅为 value,也将被选择 */

CSS3 中新增了如下属性选择器:

1
2
3
4
5
6
7
8
E[attr^="value"] {}
/* 选择具有 attr 属性且属性为以 value 开头的字符串的 E 元素 */
E[attr$="value"] {}
/* 选择具有 attr 属性且属性值为以 value 结尾的字符串的 E 元素 */
E[attr*="value"] {}
/* 选择具有 attr 属性且属性值为包含 value 的字符串的 E元素 */

多属性选择器

当然了,我们可以把多个属性选择器串拼接在一起,这样在选择目标的时候能够做到非常的具体。使用多属性选择器,可以通过定义在开始、结束以及中间任意位置的值创建应用到属性上的规则。下面是个例子:

上面的示例将 CSS3 新增的 3个属性选择器串接在一起使用,从而选中了第二个 <a> 元素,并将样式应用到了其上。

关系选择器

CSS2 中定义了 3 个关系选择器,如下:

1
2
3
4
5
6
7
8
E F /* 后代选择器 */
/* 选择所有被 E 元素包含的后代 F 元素 */
E>F /* 子选择器 */
/* 选择所有作为 E 元素的子元素 F */
E+F /* 相邻兄弟选择器 */
/* 选择紧邻在 E 元素之后的且与其位于文档树同一层级的兄弟元素 F */

CSS3 对于关系选择器,仅仅引入了一个新的选择器:

1
E~F /* 普通兄弟选择器 */

这个选择器与 CSS2 中的兄弟选择器 E+F 有些相似,二者的异同点在于:

  • 二者均选择的均为与 E 位于 DOM 同一层级并位于 E 之后的兄弟元素
  • 后者选择的仅仅是 DOM 同一层级中与 E 相邻的兄弟元素
  • 前者选择的是 DOM 同一层级中 E 之后的所有兄弟元素