Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

问题是option .light它意味着内部内部选项标记

尝试将其替换为＆＃34; option.light＆＃34;

Reference

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

Answer 2

您对.light使用<option>课程不是为了孩子。所以使用：

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

`element [attribute = value]元素.class`选择器未应用

2 个答案: