`元素[屬性=值]元素.class`選擇不適用

我想要的顏色標記爲.light從當黑色背景設置第二select消失，
有什麼不對我的CSS？`元素[屬性=值]元素.class`選擇不適用

body[data-background="Black"] { 
 
    background: black 
 
} 
 
body[data-background="Black"] option .light { 
 
    display: none !important; 
 
}

<select onchange="document.getElementsByTagName('body')[0].setAttribute('data-background', this.value)"> 
 
    <option>White</option> 
 
    <option>Black</option> 
 
</select> 
 
<select> 
 
    <option>Green</option> 
 
    <option class="light">darkBlue</option> 
 
    <option class="light">Indigo</option> 
 
    <option>Purple</option> 
 
</select>

來源

2015-09-13 GingerPlusPlus

option'之間'刪除空格''.light – vaultah

@vaultah咦，我認爲CSS是空間不敏感... – GingerPlusPlus

不，空間僅需要後代選擇。多個類選擇器的空間被刪除。 –

的問題是option .light它意味着什麼帶班光內選項標籤

嘗試用「option.light」

Reference

來代替它

有時候，作者可能希望選擇器匹配文檔樹中另一元素的後代的元素（例如，「匹配由H1元素包含的那些 EM元素」）。選擇器選擇器在一種模式中表達這種關係。的後裔空間選擇器由兩個或多個選擇器組成。形式爲「A B」的後代選擇當 B元素是您正在使用.light類<option>不是其子一些祖先元素A.

來源

2015-09-13 10:07:27 Arsen

呵呵，我以爲CSS是空間不敏感的... – GingerPlusPlus

的任意後代相匹配。因此，使用：

body[data-background="Black"] option.light { 
    display: none !important; 
}

來源

2015-09-13 10:08:00

`元素[屬性=值]元素.class`選擇不適用

回答

相關問題