0
<!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出来的时蓝色 不是红色

2018-03-16 提问
5 个回答
2

已采纳

这个CSS执行顺序的问题,就近原则。
因为 #container .after 和 .container #after 优先级是相同的,都是 id + class
但是 #container .after 定义的红色被 .container #after 覆盖,所以显示的是蓝色;

2
 #container .after {
     background: red;
}
.container #after {
     background: blue;
}

你这两个选择器都是选择的<div class="after" id="after"></div>这个div
css样式表里css代码跟html一样是从上向下、从左到右执行的,对于同样的选择器,后定义的样式会把先定义的样式覆盖掉,首先样式赋值是红色,后面你又写了蓝色的背景,覆盖了之前写的,所以最后div呈现出蓝色背景。

1

优先级不同的情况下,会应用优先级高的样式;优先级相同的情况下,后面的样式会覆盖前面的样式。你这种情况属于后者。id的优先级比类更高,如果你的css是下面这样的:

#container #after {
  background: red;
}
.container #after {
  background: blue;
}

上面的优先级比下面更高,所以会显示红色。

0

按照优先级算法,你这2个选择器的权重是一样的,所以浏览器渲染时是从上到下执行,也就是说先把div染成了红色,再把div染成了蓝色。

0

优先级相同的,后面的会覆盖前面的css样式

撰写答案

推广链接