样式化子 html 元素答案

【问题标题】：styling child html elements样式化子 html 元素
【发布时间】：2013-03-30 12:05:58
【问题描述】：

我需要在 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>

我无法控制输出，所以我无法更改类名或结构

【问题讨论】：

具体条件是什么？也就是说，什么时候文本应该是粗体的？只要您可以指定，它主要只是编写一个 CSS 选择器或一组选择器的问题。 – 请注意，在给定的代码中，c 类中的元素在这两种情况下都是 b 类中元素的子元素，因此这似乎是比简单的父子关系更复杂的关系。

【解决方案1】：

您想使用直接后代选择器>。选择器a > b 将选择b，仅当它是a 的直接后代（即孩子）。

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

【讨论】：

【解决方案2】：

您可以为特殊情况设置一个覆盖规则，例如：

.c {
    font-weight: bold;
}

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

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

【讨论】：

【解决方案3】：

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

例如，

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

【讨论】：

【解决方案4】：

最好的办法是

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

这将仅应用于特定父级的特定类。其他情况则不然。

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

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

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

这样就可以了.. :)

【讨论】：

【解决方案5】：

丹尼尔是对的

如果你需要第二个选项而不是

你可以这样做

.c{
font-weight:bold;
}

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

【讨论】：