沒有空格的元素和自身屬性的CSS規範

Question

以下樣式與規範有什麼不同？

ul .active { background: #E7F3EF;} 
    ul li.active { background: #E7F3EF;} 


<ul> 
    <li class="active">Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
</ul> 

最後一個我在上海社會科學院錯誤編碼爲ul li .active，帶我一段時間來弄清楚。

Answer 1

ul .active { background: #E7F3EF;} 

這一次將匹配類名「主動」這是一個ul元素的後代的任何元素。

ul li.active { background: #E7F3EF;} 

這一次將匹配類名「主動」這是一個ul元素的後代任何li元素。

ul li .active { background: #E7F3EF;} 

這一個將匹配與類名「活性」，即一個li元件的後代的任何元件，這是一個ul元件的後代。

正如您已經注意到的那樣，空格是相關的。選擇器中的空白通常表示後代組合子。

有關規格的相關部分，請參閱「Descendant combinators」。