Question

这是我的代码：

div{
  color: red;
}

<div>
  <a>link</a>
  <span>something</span>
  <p>paragraph</p>
  there is also some explanations
</div>

我希望仅将red颜色应用于div标记中除a和<span>标记之外的任何内容。因此，在这种情况下，paragraph和there is also some explanations应为红色。

我该怎么做？

Answer 1

编辑：

使用此CSS，您可以将<div> s的子项设为红色，然后将<a> s和<span>设为黑色：

div {
  color: red;
}
div>a,span {
  color: black;
}

检查this网站上的CSS选择器。它解释了如何以不同的方式选择元素。

Answer 2

您可以重置为initial

div {
  color: Red;
}
div * {
  color: initial;
}

<div>
  <a>link</a>
  <span>span</span>
  <p>paragraph</p>
  there is also some explanations
</div>

Answer 3

您必须应用CSS在所有元素上使用类的最佳做法。它可以节省您的时间，并且可以在您的开发人员培训的某些时候提高您的表现。

始终尝试将您的代码 保持为精益充沛 。除非你真的需要，否则不要过度沉迷于复杂的选择者。

如果您在较大的项目中继续使用基本元素选择器，您将在开发过程中遇到很多麻烦。

所以我建议你坚持这种做法。

＆＃13;

div .otherExpl {
  color: red;
}

＆＃13;

<div>
  <a>link</a>
  <span>something</span>
  <p>paragraph</p>
  <div class="otherExpl">there is also some explanations</div>
</div>

＆＃13;

Answer 4

我同意@Sqnkov，但有时我们需要一个非常具体的选择器。所以你需要的是这样的东西。

如果您希望此代码段适用于嵌套，则此代码段将用于第一级节点然后使用div *:not(span):not(a)

由于<div>是一个通用选择器，并且为其提供了一些特定的类.div_red_color，因此您也应该对选择器更加具体。

＆＃13;

div > *:not(span):not(a){
  color: red;
}

＆＃13;

<div>
  <a>link</a>
  <span>something</span>
  <p>paragraph</p>
  <div class="otherExpl">there is also some explanations</div>
</div>

＆＃13;