使用 nth-of-type 改变子元素的样式

Question

.indexNewsWidget .col-xs-6 .row-of-4-text-window h3 {
    background: pink;
}

.indexNewsWidget .col-xs-6 .row-of-4-text-window h3:nth-of-type(3), .indexNewsWidget .col-xs-6 .row-of-4-text-window h3:nth-of-type(4) {
    background: blue !important;
}

<div class="indexNewsWidget indexNewsWidgetLocal">
<div class="row">

<div class="col-sm-3 col-xs-6">
<a>
  <div class="responsiveImage"></div>
  </a>
<div class="row-of-4-text-window">
  <h3>
    <a>text</a>
  </h3>
<p class="hidden-xs">more text...</p>
    </div>
</div>
  
  <div class="col-sm-3 col-xs-6">
<a>
  <div class="responsiveImage"></div>
  </a>
<div class="row-of-4-text-window">
  <h3>
    <a>text</a>
  </h3>
<p class="hidden-xs">more text...</p>
    </div>
</div>
  
  <div class="col-sm-3 col-xs-6">
<a>
  <div class="responsiveImage"></div>
  </a>
<div class="row-of-4-text-window">
  <h3>
    <a>text</a>
  </h3>
<p class="hidden-xs">more text...</p>
    </div>
</div>
  
  <div class="col-sm-3 col-xs-6">
<a>
  <div class="responsiveImage"></div>
  </a>
<div class="row-of-4-text-window">
  <h3>
    <a>text</a>
  </h3>
<p class="hidden-xs">more text...</p>
    </div>
</div>

</div>
</div>

我正在尝试使最后两个文本具有蓝色背景。不知道我在这里做错了什么，但 nth-of-type(3) （和 4）和 nth-child(3) （和 4）似乎不能解决问题。

我在这里做错了什么？有人可以解释为什么我的解决方案不起作用吗？我很确定我以前用过很多次

塔

Answer 1

我想这就是你要找的，

.indexNewsWidget .col-xs-6:nth-of-type(3) .row-of-4-text-window h3, 
.indexNewsWidget .col-xs-6:nth-of-type(4) .row-of-4-text-window h3 {
    background: blue !important;
}

您的代码不起作用，因为您指向的是 .row-of-4-text-window 内的第三和第四个 <h3> 而不是第三和第四个 .col-xs-6 内的 <h3>。您可以在 HTML 中添加更多 <h3> 以查看差异。

希望这会有所帮助。