说起css的选择器，我们最熟悉的应该就是class选择器和id选择器。但是css中的选择器却远远不止这几种。

我们在使用css的时候，虽然知道每次使用什么方法来对元素进行设置，但是却没有总结过css中选择器的种类，今天在查阅了官方文档之后，我对css的选择器做了一个总结，下面写出来，算是给自己做了一个梳理。

如下所示是css的MDN官方文档中所例出来的css选择器。

代码实例：

类型选择器

运行结果如下：

代码实例：

类型选择器

运行结果如下：

代码实例：

类型选择器

运行结果如下：

代码实例：

类型选择器

运行结果如下：

代码实例：

类型选择器

运行结果如下：

代码实例：

元素*/ p:first-child{ color: gold; }

第一个p段落

第二个p段落

第一个p段落

运行结果如下：

代码实例：

To stop the degradation of the planet's natural environment and to build a future in which humans live in harmony with nature, by; conserving the world's biological diversity, ensuring that the use of renewable natural resources is sustainable, and promoting the reduction of pollution and wasteful consumption.

运行结果如下：

代码实例：

运行结果如下：

代码实例：

运行结果如下：

上面分别例举了后代选择器和子代选择器的代码举例，下面对两者的区别进行一个总结。

CSS中nav ul li ul 与 nav>ul>li 这两种写法的区别是什么，>的作用是什么？ 　　　　1、nav>ul只选择nav下一级里面的ul元素，例如上面dom结构里id为a的ul。 　　　　2、nav ul选择nav内所包含的所有ul元素，例如上面dom结构里面id为a、b、c的全部ul。 　　　　3、nav>ul比nav ul限定更严格，必须后面的元素只比前面的低一个级别。

代码实例：

相邻兄弟选择器1

相邻兄弟选择器2

相邻兄弟选择器3

相邻兄弟选择器4

运行结果如下：

代码实例：

通用兄弟选择器1

通用兄弟选择器2

通用兄弟选择器3

通用兄弟选择器4

运行结果如下：

通过上面的代码可以看出，相邻兄弟选择器比通用兄弟选择器更严格一点。

相邻兄弟选择器的作用是：给指定选择器后边***紧跟***的那个选择器选中的标签设置属性。（同级的标签，不能是包含关系，那样紧跟就成了父子）

通用兄弟选择器的作用是：给指定选择器后边的所有选择器选中的所有标签设置属性。