造型儿童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>

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

Answer 1

您想使用直接后代选择器>。选择器a > b仅在b的直接后代（即。孩子）时才会选择a。

jsFiddle

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

Answer 2

丹尼尔是对的

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

你可以这样做

.c{
font-weight:bold;
}

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

Answer 3

您可以针对特殊情况制定覆盖规则，例如：

.c {
    font-weight: bold;
}

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

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

Answer 4

您可以使用子选择器 ...

例如，

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

Answer 5

最好的方法是

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

这将仅适用于特定父类的特定类。不是在另一种情况下。

如果你想要扭转它，那么就像这样

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

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

这样做.. :)）