本博文介绍CSS3中新增的选择器，包括属性选择器、结构伪类选择器和伪元素选择器。
属性选择器（[属性]）可以根据元素的属性和属性值来对符合要求的元素进行选择。
属性选择器的基础语法如下表：
举两个实例：
① input[value] {} ：选择具有value属性的input标签
② input[value="123"] {} ：选择value属性值为"123"的input标签
注意事项：
（1）属性选择器（即[属性]）的权重是0,0,1,0；
（2）标签[属性] 的权重是标签权重+属性选择器权重。
首先是第一类常用的结构伪类选择器，这类选择器常用于根据父级选择器来选择里面的子元素。
基础语法如下表：
注意，这类选择器的选择步骤如下：
（1）先给所有子元素从1开始进行编号；
（2）根据选择器来进行选择。如：E:first-child就选择第一个子元素，如果这个子元素是E的话，那么就选中了；但如果第一个子元素不是E的话，那么这类选择器就不会生效。
总之，这类选择器是“先编号，再选择，选择的元素为E，则选中”。
可能语法太模糊？上实例：
① ul li:first-child ：选择 ul 下的第1个子元素，若该元素为li，则选中该元素，否则不生效；
② ul li:nth-child(6) ：选择 ul 下的第6个子元素，若该元素为li，则选中该元素，否则不生效；
③ ul li:nth-child(2n) ：选择 ul 下的所有第偶数个子元素（2n即为偶数），若其为 li 则选中。
接着，这里还要对E:nth-child(n)这一基本语法按照 n 的分类进行详细的说明：
当E:nth-child(n)中 n 的类型为“公式”时，提供以下实例供理解（n 从0开始计算）：
实际上，在日常使用中，由于nth-child(n)会给所有子元素进行编号（不管是不是E），因此E:nth-child(n) 中 n 的值和 E 作为子元素的位置往往是对应的（这样选择器才会生效）。
接着是第二类常用的结构伪类选择器，这类选择器也用于根据父级选择器来选择里面的子元素，但和第一类有些差别。
基础语法如下表：
注意，这类选择器的选择步骤如下：
（1）先给所有子元素E从1开始进行编号；
（2）根据选择器来进行选择。如：E:first-of-type就选择第一个子元素E。
直接上实例：
① div p:first-of-type ：选择 div 下的第1个子元素p；
② div p:nth-of-type(2) ：选择 div 下的第2个子元素p。
伪元素选择器可以利用css创建新标签，简化HTML结构。
伪元素选择器的基础语法如下表：
需要注意的地方如下：
（1）创建的标签属于行内元素；
（2）新创建的元素在文档树中找不到；
（3）before和after必须有content属性；
（4）伪元素选择器（::before 和 ::after）权重为0,0,0,1。
提供一个实例：
页面效果如下：
可见，通过伪元素选择器，div元素中的文字“选择器”前后分别添加了文字“前面的”和“后面的”，这就是::before和::after的基础用法。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/145718.html