【原创】css3新增选择器 -凯发官网首页

　　效果在开发过程中选择器的作用大家应该有一定的了解，在css3中对于标签的选择除了css2中已经存在的选择器之外，又添加了一些新的选择器，比如相邻兄弟选择器，通配兄弟选择器和伪类选择器，下面我们分别来看一下兄弟选择器和伪类选择器如何操作。

　　事例代码：

　　实现效果:

　　兄弟选择器有两种(相邻兄弟选择器，通用兄弟选择器)

　　相邻兄弟选择器：(" ")

　　标签1 标签2:选择紧挨着标签1的下一个标签

　　如上图所示，标签1的class为first，现在我想要将要标签2背景颜色设为黄色此时我们可以通过兄弟标签来完成，代码如下(选取first标签后面的相邻标签li)：

　　效果如图：

　　注意：现在将body中的first标签后面的标签修改为p此时我们再看效果，代码修改如下：

　　此时在使用上面的方式，此时我们来看运行效果：

　　这是咋回事呢？因为相邻兄弟标签选择器只会选择紧跟着 前面标签的后一个标签，如果该标签不是li此时选择失败，css样式不再执行。

　　通用兄弟选择器：(~)

　　标签1~标签2:选择标签1后面的所有标签2

　　代码跟上面刚开始时候的代码一致，此时对于first后面的标签设置代码如下：

　　效果如下：

　　此时first后面所有的li标签都变成了黄色。

　　当然了在css3中还有一个选择器--伪类选择器，常用的伪类选择器有下面几种：

　　事例代码：

　　事例效果：

　　伪类选择器1:first-child

　　事例效果：

　　伪类选择器2:first-of-type

　　事例效果：

　　伪类选择器：last-child:作用和first-child相似，但是last-child选择的是最后一个标签。

　　伪类选择器：last-of-type:作用和first-of-type相似，但是last-of-type是选择相同类别标签中的最后一个。

　　伪类选择器：nth-child(参数)，此类选择器可以实现一次选择一个或多个标签，其中的参数可以是整数也可以是2n 1这种类型的表达式，如果是整数则表明选择的是一个制定的标签，如果是一个表达式则证明选择的是多个标签比如2n 1选择多个奇数标签。但是需要注意的是选择的时候该选择器并不区分对应的标签，比如下面的代码：

　　事例代码：

　　实现的效果：

　　对应的选择器：

　　实现的效果：

　　但是将其中的1改成2再看效果：

　　原因分析：nth-child(1)选择.wrap标签下第一个标签，如果标签为则执行css否则不再执行。但是如果为nth-child(2)选择.wrap标签下第二个标签，如果标签为li则执行css否则不执行。刚好第一个标签是li但是第二个不是，因此会看到上面的两种情况。

　　如果选择器变为下面的情况：

　　运行效果：

　　原因分析：如果为2n 1此处n为从0开始的正整数，此处n的值不固定，直到所有的标签遍历完毕，该表达式的含义是选出所有的奇数标签并且这些奇数标签必须是li才会执行css，否则不执行css，因为奇数位置刚好都是li，因此会出现上面的情况。

　　伪类选择器：nth-last-child(参数)----此处参数跟nth-child的情况相同，作用原理跟nth-child相同，只不过该选择器选择标签的时候是从后向前选择的。

　　伪类选择器：nth-of-type(参数)----该参数跟nth-child的参数取值相同，只不过该选择器作用是选择相同种类的标签，比如下面的代码：

　　运行效果：

　　原理分析：从当前的.wrap标签中将相同层级的子标签li按照从上到下的顺序从其中选出并依次排序，之后从排序之后的标签li中选择第二个将其颜色设置为黄色。刚好第二个li就是上图的第三个标签，因此看到上面的现象。

　　伪类选择器：last-of-type(参数)，参数的取值和nth-child相同，且作用原理跟上面的nth-of-type相同，只不过筛选的过程是从后向前依次筛选并排序

　　伪类选择器only-child

　　事例代码：

　　选择器代码：

　　运行效果：

　　原理分析：上面的only-child作用是选择当前div标签中只有一个子标签，并且该子标签是p标签的时候执行css否则不执行，因此我们会看到上面的结果。

　　伪类选择器：empty

　　事例代码：

　　作用原理：选择div标签中所有的p标签，但是p标签中内容是空的，这样的p标签使用对应的css样式。

　　ok到这里就是我们在开发过程中使用的所有伪类选择器。希望对大家的学习能起到一定的帮助作用。