Question

我想隐藏col12类。但是只能在content-zone类下隐藏col12，因为我在其他地方都不想隐藏它。我已经尝试了以下方法，但是不起作用：

.content-zone.col12 {
  display: none;
}

我的代码是：

<div class="content-zone">
<div class="col12">
</div>
</div>

如果有人可以建议我如何有选择地设置class属性，我将不胜感激。

Answer 1

您在两个类定义之间缺少空格。

.content-zone .col12

这将告诉它寻找content-zone是col12子级n的孩子。

但是，您当前正在告诉它的内容是查找两个类都设置在同一元素上的元素：

<div class="content-zone col12">

如您在此处看到的，使用空格时，无论深度如何，它都将匹配col12中的所有content-zone：

.content-zone .col12 {
  display: none;
}

<div class="content-zone">
  <div class="col12">Inside div 1</div>
  <div>
    <div class="col12">Inside div 2</div>
  </div>
</div>

<div class="col12">Outside div</div>

对于直子，请使用>而不是空格。仅当元素是content-zone的直接子元素时，此元素才匹配。您可以see here忽略第二个col12，因为它不是content-zone的直接子代：

.content-zone > .col12 {
  display: none;
}

<div class="content-zone">
  <div class="col12">Inside div 1</div>
  <div>
    <div class="col12">Inside div 2</div>
  </div>
</div>

<div class="col12">Outside div</div>

如何将样式应用于特定班级？

1 个答案: