如何仅在类下使用css属性

Question

我有像这样的css属性

:before,
:after {
 content: '';
 display: block;
 position: absolute;
 box-sizing: border-box;
}

它正在影响整个页面。所以我需要它只影响'togglebox'类下的所有类型的元素。那么我的语法应该如何。

Answer 1

您需要指定要应用CSS规则的类，如下所示：

.myclass:before,
.myclass:after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
}

然后，您希望此样式应用的元素中需要class="myclass"，在您的情况下，这将是您的“切换框”。我不是100％肯定“togglebox”的意思，但我认为它的内容如下：

<input type="checkbox" name="togglebox" class="myclass"/>

更新：鉴于以下评论，您似乎希望将该样式应用于“togglebox”的 children - 这是一个非常简单的修改：

.myclass *:before,
.myclass *:after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
}

此css规则现在将适用于任何（因此*）后代元素（直系儿童或其子女等）。

如果您只想将规则应用于指导儿童（而不是儿童的孩子等），您可以使用：

.myclass > *:before,
.myclass > *:after {
  content: '';
  display: block;
  position: absolute;
  box-sizing: border-box;
}

有关详细信息，请参阅here。

Answer 2

.togglebox:before,
.togglebox:after {
 content: '';
 display: block;
 position: absolute;
 box-sizing: border-box;
}