`元素[属性=值]元素.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`选择不适用

回答

相关问题