使用CSS选择特定元素

Question

我正在尝试用CSS选择器选择标题。这是我的CSS

.category-center :nth-last-child(-n+2) {
    color: red;
}

<div class="category-center">
  <div class="cbp-item-wrapper">
    <div class="post-medias">
      <a href="" target="_blank">
        <img src="#" alt="">
      </a>
    </div>
    <div class="post-info">
      <h4 class="post-title">
        <a href="" target="_blank">This is awesome title</a>
      </h4>
    </div>
  </div>
</div>

有人可以帮我这个吗？

Answer 1

你可以使用.category-center .post-title a。它将使用<a>元素中的类post-title来定位元素内部的category-center元素。

你甚至可以使用.post-title a，但它会破坏你已经拥有的.category-center中元素的CSS层次结构。此外，它将HTML与CSS紧密绑定，因此将来如果将HTML放在.category-center之外，则样式将不适用，并且您将知道该操作出现问题。

.category-center .post-title a {
  color: red;
}

<div class="category-center">
  <div class="cbp-item-wrapper">
    <div class="post-medias">
      <a href="" target="_blank">
        <img src="#" alt="">
      </a>
    </div>
    <div class="post-info">
      <h4 class="post-title"><a href="" target="_blank">This is awesome title</a></h4>
    </div>
  </div>
    <div class="cbp-item-wrapper">
    <div class="post-medias">
      <a href="" target="_blank">
        <img src="#" alt="">
      </a>
    </div>
    <div class="post-info">
      <h4 class="post-title"><a href="" target="_blank">This is awesome title</a></h4>
    </div>
  </div>
    <div class="cbp-item-wrapper">
    <div class="post-medias">
      <a href="" target="_blank">
        <img src="#" alt="">
      </a>
    </div>
    <div class="post-info">
      <h4 class="post-title"><a href="" target="_blank">This is awesome title</a></h4>
    </div>
  </div>
</div>

Answer 2

只是针对课程而不是特定数量的孩子，因为这意味着如果您稍微更改页面重新设计，它将不再有效。

您可以在h4类上为您的标签添加课程，也可以定位任何标签，如下所示。

.post-title a {
  color: red;
}

<div class="category-center">
  <div class="cbp-item-wrapper">
    <div class="post-medias">
      <a href="" target="_blank">
        <img src="#" alt="">
      </a>
    </div>
    <div class="post-info">
      <h4 class="post-title"><a href="" target="_blank">This is awesome title</a></h4>
    </div>
  </div>
</div>