css - 样式化子 html 元素

Question

我需要在 dom 中设置一些子元素的样式，但前提是它们不是特定元素的子元素。作为一个例子，我需要在这个范围内加粗文本

<span class="a">
 <span class="b">
  <span class="c">
    bold this test
  </span>
 </span>
</span>

但不是在这个

<span class="a">
 <a class="SomeOtherclass">
  <span class="b">
   <span class="c">
    not bold
   </span>
  </span>
 </a>
</span>

我无法控制输出，因此无法更改类名或结构

score 7 · Accepted Answer

您想使用直接后代选择器>。只有a > b当b它是. _a

.a > .b > .c {
    font-weight:bold;
}

score 0 · Accepted Answer

最好的方法是

span.a>a.SomeOtherclass>span.b>span.c{
  font-weight: bold
}

这将仅适用于特定父级的特定类。不是在其他情况下。

如果你想反转它，那么它会是这样的

span.a>span.b>span.c{
  font-weight: bold
}

如果您在此 DOM 层次结构之间添加任何内容（任何标签），则不会应用它。

这会做.. :)

score 0 · Accepted Answer

丹尼尔是对的

如果你需要第二个选项

你可以这样做

.c{
font-weight:bold;
}

.SomeOtherclass .c{
font-weight:normal;
}

score 0 · Accepted Answer

对于特殊情况，您可以有一个压倒一切的规则，例如：

.c {
    font-weight: bold;
}

.SomeOtherClass .c {
    font-weight: normal;
}

我假设在正常情况下，您并不总是有 a、b、c 嵌套 - 这就是为什么您要求应用此规则，除非在特定情况下。

score 0 · Accepted Answer

您可以使用Child-of 选择器...

例如，

.a { /*Your Style*/ }
.a > .b { /*Your Style*/ }
.a > .b > .c { /*Your Style*/ }

5 回答 5