CSS选择器有很多组合的用法，通过这些组合来控制更复杂更有趣的样式表，来完成工作。这里就来说说层叠、分组、继承，通过这些来说说CSS的选择器的进一步用法，希望能帮到各位朋友。
工具/原料
1
CSS基础知识
2
HTML基础知识
方法/步骤
1CSS层叠
这里首先来说说CSS选择器的外部层叠的详细用法和教程说明，具体例子如下，首先定义三个外部的文件，分别为one.css和two.css以及three.css，其中one.css的代码为p{color:red;}；two.css为p{color:yellow;}；three.css为p{color:blue;}，在HTML中的代码如下：
CSS层叠效果显示
可以看到如下图的执行结果，越晚给的优先级越高，所以最终这段话显示的文字是蓝色的。3CSS分组
接着上面的步骤来说说如何来实现分组的功能，这里也通过代码来实现吧，具体代码如下：
HTML和CSS字体颜色和大小控制
HTML和CSS字体颜色和大小控制
HTML和CSS字体颜色和大小控制
可以看到，分组使用都好来将实现相同功能的CSS表示在一起的，所以有如上的代码，而且有了如下图的执行结果。4CSS分组
我们不仅可以分组，还能对分组的进行扩展，具体的代码如下：
HTML和CSS字体颜色和大小控制
HTML和CSS字体颜色和大小控制
HTML和CSS字体颜色和大小控制
可以看到h1的字体和下面的字体不一样，这是应为我们设置了h1的字体达到的效果。5CSS继承
说了分组，这里就来说说继承，具体的也是通过代码来说明问题，具体的代码如下图所示：
HTML和CSS字体颜色和大小控制
从下图执行的结果可以看到，字体的颜色变成了红色的了，那么是什么原因呢？这就是继承，h1的字体颜色继承了body的字体颜色，所以可以看到现在显示的颜色是红色。6CSS上下文选择器
这里我在来说说上下文选择器的实现，具体的例子如下代码所示：
HTML和CSS字体颜色和大小控制
HTML和CSS字体颜色和大小控制
如下图可以看到执行的结果，可以看到上下文选择器使用的方式是h1 i和p i 来设置样式来实现的。注意事项
合理选择选择器来设置CSS样式
下一篇：经典好吃的咸烧白