多個(gè)css選擇器組合問(wèn)題

<!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>

為什么這個(gè)div出來(lái)的時(shí)藍(lán)色不是紅色

回答

編輯回答

鹿惑

優(yōu)先級(jí)不同的情況下，會(huì)應(yīng)用優(yōu)先級(jí)高的樣式；優(yōu)先級(jí)相同的情況下，后面的樣式會(huì)覆蓋前面的樣式。你這種情況屬于后者。id的優(yōu)先級(jí)比類(lèi)更高，如果你的css是下面這樣的：

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

上面的優(yōu)先級(jí)比下面更高，所以會(huì)顯示紅色。

2017年2月1日 19:59

編輯回答

吃藕丑

優(yōu)先級(jí)相同的，后面的會(huì)覆蓋前面的css樣式

2017年1月18日 12:51

編輯回答

涼薄

按照優(yōu)先級(jí)算法，你這2個(gè)選擇器的權(quán)重是一樣的，所以瀏覽器渲染時(shí)是從上到下執(zhí)行，也就是說(shuō)先把div染成了紅色，再把div染成了藍(lán)色。

2017年6月3日 04:18

編輯回答

忘了我

這個(gè)CSS執(zhí)行順序的問(wèn)題，就近原則。
因?yàn)? #container .after 和 .container #after 優(yōu)先級(jí)是相同的，都是 id + class
但是 #container .after 定義的紅色被 .container #after 覆蓋，所以顯示的是藍(lán)色；

2018年7月23日 03:52

編輯回答

命于你

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

你這兩個(gè)選擇器都是選擇的<div class="after" id="after"></div>這個(gè)div
css樣式表里css代碼跟html一樣是從上向下、從左到右執(zhí)行的，對(duì)于同樣的選擇器，后定義的樣式會(huì)把先定義的樣式覆蓋掉，首先樣式賦值是紅色，后面你又寫(xiě)了藍(lán)色的背景，覆蓋了之前寫(xiě)的，所以最后div呈現(xiàn)出藍(lán)色背景。

2017年4月6日 20:36