CSS3学习笔记（一）：选择器_html/css_WEB-ITnose-html教程-PHP中文网

CSS3学习笔记（一）：选择器_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 09:07:39

原创

1371人浏览过

自定义属性：

选择器

-webkit-
-moz-
-o-

属性选择器

在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及以上支持。

就我个人而言，作为初学者，前两个比较容易理解。其他几个当中，需要注意的几点：

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

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 的子节点

Get笔记
Get笔记，一款AI驱动的知识管理产品

125

查看详情
E:last-of-type：表示 E 的父元素中最后一个类型为 E 的子节点
E:only-child：表示 E 的父元素中只有一个子节点。
E:only-of-type：表示 E 的父元素中有且只有一个子节点，且这个唯一的子节点的类型必须是 E 。

【备注】 兼容性如下：

*在学习的时候，初学者可能会有点混淆（尤其是非科班出身的，比如我QAQ），甚至难以理解这一选择器的原理。这里只需要稍微了解一下 DOM 的基本知识，知道节点的概念就能明白。
首先，在这里，子节点指的是元素节点，计算时从1开始计数（而非0），且计算时不包括文本节点。由于 DOM 的树状结构特性，当我们需要查找符合条件的 E 元素时，比如

元素，我们也许有多种方法进行查找，这种选择器的方法是：首先查找

元素，然后查找含有

元素的父级，假设是

元素，然后在元素中查找所有满足条件的

元素。总结一下，就是“子??父??子”的查找顺序，至于为什么按照这样的查找顺序，背后的原理我也不太了解，因此对于第一步，是查找所有的

元素，还是在相同层级的节点上只需要找到一个

元素即可？这个问题我也不太清楚。*