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）似乎没有做到这一点。

我在这里做错了什么？有人可以解释为什么我的解决方案不起作用？

之前，我很确定我已经多次使用过这个

TA

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;
}

您的代码无效，因为您指的是第3和第4 <h3>内的.row-of-4-text-window和第3和第4 <h3> .col-xs-6 <h3> 1}}。您可以在HTML中添加更多pip install pytesseract以查看差异。

希望这有帮助。

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

1 个答案: