' element[attribute=value] element .class '选择器未应用

Question

当设置黑色背景时，我希望标记为.light的颜色从第二个select中消失，
我的CSS有什么问题?

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>

Answer 1

问题是option .light它意味着与类光在选项标签

尝试将其替换为"option.light"

参考

有时，作者可能希望选择器匹配的元素是文档树中另一个元素的后代(例如，"匹配那些由H1元素包含的EM元素")。后代选择器在模式中表达这种关系。后代选择器由两个或多个以白色分隔的选择器组成空间。形式"A B"的后代选择器匹配元素B是某个祖先元素a的任意后代。

Answer 2

您正在为<option>使用.light类，而不是为它的子类。所以使用:

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