鍍金池/ 問答/HTML5  網絡安全  HTML/ 多個css選擇器組合問題

多個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出來的時藍色 不是紅色

回答
編輯回答
鹿惑

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

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

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

2017年2月1日 19:59
編輯回答
吃藕丑

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

2017年1月18日 12:51
編輯回答
涼薄

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

2017年6月3日 04:18
編輯回答
忘了我

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

2018年7月23日 03:52
編輯回答
命于你
 #container .after {
     background: red;
}
.container #after {
     background: blue;
}

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

2017年4月6日 20:36