如何为具有特定文本的孩子的 div 更改 CSS？

Question

如何为具有 h3 文本“Example Text1”的第一行中的 Div 更改 CSS

<div class="test">
  <div>
    <h3> Example Text1 </h3>
  </div>
</div>

<div class="test">
  <div>
    <h3> Example Text2 </h3>
  </div>
</div>

Answer 1

您不能仅基于具有 CSS 的元素上的内容应用 CSS 规则，但:empty选择器除外。 :contains是一个建议的选择器，但尚未实现。

您将需要使用 JS，或者根据您拥有的元素的顺序应用 CSS，例如在这种情况下您可以使用

.test:first-of-type h3 {
  color: red;
}

仅设置第一个 h3 标签的样式。

如果您不介意添加依赖项，您还可以查看 jQuery 中的:contains()之类的内容。

Answer 2

您不能将 CSS 给具有特定文本的孩子的 div 。 但是您可以使用:first-child CSS。

 .test:first-child h3 { color: red; }

 <div class="test"> <div> <h3> Example Text1 </h3> </div> </div> <div class="test"> <div> <h3> Example Text2 </h3> </div> </div>