属性选择器

在CSS3以前，如果需要选择选择某个/类元素的话，一般会使用id/class来进行选择，CSS3则提供了更强大的功能，可以根据元素中的某个属性，从而选中该元素。具体如下：

· E[attr]：属性名为 attr 的所有 E 元素

· E[attr="value"]：属性 attr 的属性值 为 value 的所有 E 元素

· E[attr~="value"]：属性值(>=1)中包含 value 的

· E[attr^="value"]：属性值是以 value 开头的

· E[attr$="value"]：属性值是以 value 结束的

· E[attr*="value"]属值中包含了 value的

· E[attr|="value"]：属性值是 value 或者以 value- 开头的值

【备注】 IE7及以上支持。

前两个比较容易理解。其他几个当中，需要注意的几点：

1. E[attr~="value"]和E[attr*="value"]：~=是指某属性可能包含一个或多个属性值，只要该属性中包含特定 value 的，即满足条件，后者是指属性值中的一部分等于 value 即可。

2. E[attr|="value"]：以 value- 开头，而不是以 value 开头，注意连词符-的存在。

伪类选择器

在CSS3以前，已经有了一些伪类选择器，如 CSS1 中的:hover、:visited， CSS2 中的:after、:before等等，CSS3 继续将之发扬光大。

结构性伪类选择器

E:nth-child(n)：表示 E 的父元素中第 n 个子节点，n 的值可以是：

n：从1开始的整数；

odd/2n-1：表示 E 的父元素中所有奇数子节点；

even/2n：表示 E 的父元素中所有偶数子节点。

E:nth-last-child(n)：表示 E 的父元素中倒数第 n 个子节点

E:nth-of-type(n)：表示 E 的父元素中第 n 个类型为 E 的字节点

E:nth-last-of-type(n)：表示 E 的父元素中倒数第 n 个类型为 E 的子节点

E:empty：表示E元素中没有子节点。

E:first-child： 表示 E 的父元素中第一个子节点

E:last-child： 表示 E 的父元素中最后一个子节点

E:first-of-type： 表示 E 的父元素中第一个类型为 E 的子节点

E:last-of-type： 表示 E 的父元素中最后一个类型为 E 的子节点

E:only-child：表示 E 的父元素中只有一个子节点。

E:only-of-type： 表示 E 的父元素中有且只有一个子节点，且这个唯一的子节点的类型必须是 E 。

其他伪类选择器

· E:target 表示当前的 URL 片段的元素类型，这个元素必须是 E

· E:disabled 表示不可点击的表单控件

· E:enabled 表示可点击的表单控件

· E:checked 表示已选中的 checkbox 或 radio

· E:first-line 表示 E 元素中的第一行

· E:first-letter 表示 E 元素中的第一个字符

· E::selection表示 E 元素在用户选中文字时

· E::before 生成内容在 E 元素前

· E::after 生成内容在 E 元素后

· E:not(s) 表示 E 元素不被匹配

· E~F表示 E 元素毗邻的 F 元素

注意的一点是:before和::before，:after和::after是一个意思，只不过:是 CSS2 的写法，::是 CSS3 的写法，具体可以查阅 MDN 的文档。

小结

以上基本就是 CSS3 选择器（包括 CSS1 和 CSS2）的常见选择器了

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML5/CSS3频道，获取更多WEB前端知识！