今天晚上写了一个页面，结果发现用到了好多选择器，尤其是在一个标签上就有多个选择器在起

作用，那么当5个选择器全部加在一个标签上会发生什么呢，我试了下。下面与大家分享下结果。


你好

背景显示×××，也就是说起作用的是body #d1这个派生选择器，首先我们要弄懂一个概念，其实每个选择器是都起作用的，css叫级联样式表，其实我觉得叫层叠样式表让人更好理解，顾名思义，也就是一层一层叠起来的，没错，实际上也是这样的。所有选择器都执行的，只不过派生选择器是最后执行的，所以它把其他的选择器的给覆盖了，在这里说优先级什么的，我觉得还不如说执行的先后顺序更好让人理解。


好了，知道了派生选择器是最后执行的，我们把代码改下，把派生选择器去掉，看看结果。


背景显示蓝色，所以除去派生选择器后，最后一个执行的是id选择器


去掉id选择器，背景显示红色，所以除去id选择器后，最后一个运行的是class选择器


去掉class选择器，背景显示绿色，这里有个问题，当你把分组选择器和标签选择器位置换一下哎的话，那么背景其实是会显示白色的。


那么接下来得出的结论是，分组选择器和标签选择器哪个在前面，哪个先执行，接下来执行前面2个剩下来的一个，接下来执行class选择器，接下是id选择器，接下来是派生选择器。


可能有人会觉得我上面的测试其实还不完全。是的，我只能说你很仔细，我上面测试并不完全，你完全可以把选择器的顺序随意的调换，然后来得出跟我相同的结论。