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类上将一个类放在您的标签上，或将任何标签作为目标。

int main(int argc, const char** argv)
{
    conv::des *conv_desc = nullptr; // does not call default constructor.

    if (a > 1)
    {
        conv_desc = new conv::des(1, 2, 3);
    } else if(b > 1) {
        conv_desc = new conv::des(1, 2);
    } else {
        conv_desc = new conv::des(1);
    }
    if (conv_desc == nullptr) { /* memory allocation failed */ }
    // conv_desc is initialized at this point.
    // ...
    // remember to delete conv_desc
    if (conv_desc != nullptr) { delete conv_desc; conv_desc = nullptr; }
    return 0;
}

.post-title a {
  color: red;
}

使用CSS选择特定元素

2 个答案: