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

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


<html>

<head>

<style>

.c1{

background-color:red;

}

#d1{

background-color:blue;

}

body,div{

background-color:white;

}

body #d1{

background-color:yellow;

}

div{

background-color:green;

}

</style>

</head>

<body>

<div id='d1' class='c1'>你好</div>

</body>

</html>

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


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


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


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


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


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


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