多个css选择器组合问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.after{
width: 300px;
height: 200px;
margin: 10px;
box-shadow: 0px 10px 30px #cfcfcf;
}
#container .after {
background: red;
}
.container #after {
background: blue;
}
</style>
</head>
<body>
<div class="container" id="container">
<div class="after" id="after"></div>
</div>
</body>
</html>为什么这个div出来的时蓝色 不是红色
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
这个CSS执行顺序的问题，就近原则。
因为 #container .after 和 .container #after 优先级是相同的，都是 id + class
但是 #container .after 定义的红色被 .container #after 覆盖，所以显示的是蓝色；
你这两个选择器都是选择的
<div class="after" id="after"></div>这个divcss样式表里css代码跟html一样是从上向下、从左到右执行的，对于同样的选择器，后定义的样式会把先定义的样式覆盖掉，首先样式赋值是红色，后面你又写了蓝色的背景，覆盖了之前写的，所以最后div呈现出蓝色背景。
优先级不同的情况下，会应用优先级高的样式；优先级相同的情况下，后面的样式会覆盖前面的样式。你这种情况属于后者。id的优先级比类更高，如果你的css是下面这样的：
上面的优先级比下面更高，所以会显示红色。
按照优先级算法，你这2个选择器的权重是一样的，所以浏览器渲染时是从上到下执行，也就是说先把div染成了红色，再把div染成了蓝色。
优先级相同的，后面的会覆盖前面的css样式