CSS選擇器如何實際工作？

Question

我環顧四周尋找這方面的信息，但由於我不確定這個過程的技術名稱，我似乎無法找到答案。

讓我們說我有這樣的：

.some_class {} 
.some_class .sub_div {} 

<div class="some_class"> 
    <div class="intermediate_div"> 
    <div class="sub_div"> 

從我的理解，選擇.some_class .sub_div應適用於DIV 'sub_div'。但它似乎並非如此，因爲我總是必須回去並將其更改爲'.some_class .intermediate_div .sub_div'。

這是正確的還是我錯過了什麼？

我的印象是，.some_class .sub_div應該應用於.some_class元素中的任何.sub_div實例。

Answer 1

.some_class .sub_div可以毫無混淆地工作。但你實際上正確.some_class .intermediate_div .sub_div會工作，但.some_class .sub_div不會因爲css的特殊性。下面

尋找一個例子：

div.intermediate_div .sub_div { 
    color: red; 
} 
.some_class .sub_div { 
    color: blue; 
} 

你會想到什麼顏色藍色應用？號紅顏色應用，因爲div.intermediate_div .sub_nav較高的特異性比.some_class .sub_div，因此在這種情況下，你可能會奇怪地看到，

.some_class .intermediate_div .sub_div{ 
    color: blue; 
} 

作品。因爲它比以前的選擇器更具特色。

查看更多關於css特異性here和我的previous answer。

Answer 2

CSS將對每個元素應用最具體的規則。 在兩個同樣具體的規則的情況下，它將應用最後定義的規則。

看看this fiddle，它使用下面的HTML：

<div class="some_class"> 
    Some class 
    <div class="intermediate_div"> 
     Intermediate 
     <div class="sub_div">Sub Div</div> 
    </div> 
</div> 

這個CSS：

.some_class { 
    color: red; 
} 
.intermediate_div { 
    background-color: blue; 
} 
.intermediate_div .sub_div { 
    background-color: orange; 
} 
.some_class .sub_div { 
    background-color: green; 
} 

所有的文字是紅色的，因爲some_class是紅色的，而裏面的一切div繼承了這種風格。

intermediate_div有一個藍色的背景，它會被sub_div繼承。但sub_div有兩個更具體的規則定義。

這兩個具有兩個類選擇器的規則同樣具體。兩者都比藍色背景更具體，因爲它們基於兩個類而不是一個選擇。橙色背景被忽略，因爲當它們具有相同的特定性時，將使用最後定義的規則。

當你使用一個元素ID，這是比一個類更具體，因爲ids是（應該是）唯一的。因此，在this modified fiddle中，您可以看到sub_div從＃div1獲取樣式，即使該規則是首先定義的，並且只有一個選擇器。它仍然優先於稍後定義的規則，並且具有兩個選擇器的規則，因爲它使用唯一的ID。