将不同的CSS样式应用于具有相同类名的两个相同的h4标签

Question

我有两个具有相同类名的h4标签。我想更改第二个h4标签值的颜色。但是颜色也适用于第一个标签。我不知道如何区分第一个标签和第二个标签

<h4 _ngcontent-c2="" class="text-center vertical-spacing-5">Job Cart1</h4>

<h4 _ngcontent-c2="" class="text-center vertical-spacing-5">Job Cart2</h4>

我只想使用CSS更改文本的颜色。我无法在html端添加或更改任何内容

Answer 1

您可以使用h4.vertical-spacing-5:nth-of-type(2)

h4.vertical-spacing-5:nth-of-type(2) {
  color: red;
}

<h4 _ngcontent-c2="" class="text-center vertical-spacing-5">Job Cart1</h4>

<h4 _ngcontent-c2="" class="text-center vertical-spacing-5">Job Cart2</h4>

Answer 2

由于元素相同，因此只能使用combinators和/或structural pseudo-classes区分它们与其他元素的关系。

由于这些取决于其他元素DOM结构的位置，因此具体操作方式取决于该DOM结构是什么。

例如，如果结构是这样的：

h4 {
  color: red;
}

section+section h4 {
  color: blue;
}

<div id="example">
  <section>
    <h4 _ngcontent-c2="" class="text-center vertical-spacing-5">Job Cart1</h4>
    <p>Ipsum…</p>
  </section>
  <section>
    <h4 _ngcontent-c2="" class="text-center vertical-spacing-5">Job Cart1</h4>
    <p>Ipsum…</p>
  </section>
</div>

Answer 3

h4.text-center:nth-child(2)
        {
          color: red;
        }