CSS用不同颜色将第n个类型的子元素着色

Question

我想选择nth child of type并使用其他颜色。我不想为这些元素分配ID，因为我是通过模板引擎的循环生成ID的。

我从这里获取了一些信息

https://www.w3schools.com/cssref/sel_first-of-type.asp

https://www.w3schools.com/cssref/sel_nth-of-type.asp

https://www.w3schools.com/cssref/sel_last-of-type.asp

这就是我得到的

#service {
  background: #000000;
  color: #ffffff;
  border-bottom: 1px solid #424242;
}
#serviceItems {
  display: flex;
  margin: 0 50px;
}
.serviceItem {
  flex: 1;
  text-align: center;
  margin-top: 0;
}
.serviceItemHeader:first-of-type {
  color: #80E000;
}
.serviceItemHeader:nth-of-type(2) {
  color: #F97A00;
}
.serviceItemHeader:nth-of-type(3) {
  color: #B277DD;
}
.serviceItemHeader:last-of-type {
  color: #e2c100;
}

<div id="service" class="section">
  <div id="serviceItems">
    <div class="serviceItem">
      <h4 class="serviceItemHeader">Container 1</h4>
      <h4>Container 1</h4>
    </div>
    <div class="serviceItem">
      <h4 class="serviceItemHeader">Container 2</h4>
      <h4>Container 2</h4>
    </div>
    <div class="serviceItem">
      <h4 class="serviceItemHeader">Container 3</h4>
      <h4>Container 3</h4>
    </div>
    <div class="serviceItem">
      <h4 class="serviceItemHeader">Container 4</h4>
      <h4>Container 4</h4>
    </div>
  </div>
</div>

，我想知道为什么这些标题使用相同的颜色着色？我希望他们有不同的颜色。

Answer 1

是的，已经问过并回答了这个问题。但特别针对您的问题，您需要使用POST来评估.serviceItem，然后将结果应用于基础的nth-of-child类。

.serviceItemHeader

#service {
  background: #000000;
  color: #ffffff;
  border-bottom: 1px solid #424242;
}

#serviceItems {
  display: flex;
  margin: 0 50px;
}

.serviceItem {
  flex: 1;
  text-align: center;
  margin-top: 0;
}

.serviceItem:first-of-type .serviceItemHeader {
  color: #80E000;
}

.serviceItem:nth-of-type(2) .serviceItemHeader {
  color: #F97A00;
}

.serviceItem:nth-of-type(3)  .serviceItemHeader {
  color: #B277DD;
}

.serviceItem:last-of-type .serviceItemHeader {
  color: #e2c100;
}

Answer 2

一个简单的解释是*-of-type选择器可用于同级元素。您要着色的元素在您的情况下是“表兄弟”，因此它不会像您那样做。

要解决此问题，请使用父级上的*-of-type选择器，选择父级后，只需对页眉着色即可。

#service {
  background: #000000;
  color: #ffffff;
  border-bottom: 1px solid #424242;
}

#serviceItems {
  display: flex;
  margin: 0 50px;
}

.serviceItem {
  flex: 1;
  text-align: center;
  margin-top: 0;
}

.serviceItem:first-of-type .serviceItemHeader {
  color: #80E000;
}

.serviceItem:nth-of-type(2) .serviceItemHeader {
  color: #F97A00;
}

.serviceItem:nth-of-type(3) .serviceItemHeader {
  color: #B277DD;
}

.serviceItem:last-of-type .serviceItemHeader {
  color: #e2c100;
}

<div id="service" class="section">
  <div id="serviceItems">

    <div class="serviceItem">
      <h4 class="serviceItemHeader">
        Container 1
      </h4>
      <h4>
        Container 1
      </h4>
    </div>

    <div class="serviceItem">
      <h4 class="serviceItemHeader">
        Container 2
      </h4>
      <h4>
        Container 2
      </h4>
    </div>

    <div class="serviceItem">
      <h4 class="serviceItemHeader">
        Container 3
      </h4>
      <h4>
        Container 3
      </h4>
    </div>

    <div class="serviceItem">
      <h4 class="serviceItemHeader">
        Container 4
      </h4>
      <h4>
        Container 4
      </h4>
    </div>

  </div>
</div>

Answer 3

CSS将元素视为直接父元素的子元素，因此每个标头都被计为.serviceItem父元素之下的第一个子元素。因此，在这种情况下，您可以通过以下方法对其进行修复：

#service {
  background: #000000;
  color: #ffffff;
  border-bottom: 1px solid #424242;
}

#serviceItems {
  display: flex;
  margin: 0 50px;
}

.serviceItem {
  flex: 1;
  text-align: center;
  margin-top: 0;
}

.serviceItem:first-of-type .serviceItemHeader {
  color: #80E000;
}

.serviceItem:nth-of-type(2) .serviceItemHeader {
  color: #F97A00;
}

.serviceItem:nth-of-type(3) .serviceItemHeader {
  color: #B277DD;
}

.serviceItem:last-of-type .serviceItemHeader {
  color: #e2c100;
}

<div id="service" class="section">
  <div id="serviceItems">

    <div class="serviceItem">
      <h4 class="serviceItemHeader">
        Container 1
      </h4>
      <h4>
        Container 1
      </h4>
    </div>

    <div class="serviceItem">
      <h4 class="serviceItemHeader">
        Container 2
      </h4>
      <h4>
        Container 2
      </h4>
    </div>

    <div class="serviceItem">
      <h4 class="serviceItemHeader">
        Container 3
      </h4>
      <h4>
        Container 3
      </h4>
    </div>

    <div class="serviceItem">
      <h4 class="serviceItemHeader">
        Container 4
      </h4>
      <h4>
        Container 4
      </h4>
    </div>

  </div>
</div>