如何用CSS选择器排除孙子元素中的最后一个元素的特定类样式?

如何用CSS选择器排除孙子元素中的最后一个元素的特定类样式?

去除孙子元素中最后一个元素的特定类样式

要选择特定类interline的孙子元素,但要排除最后一个,可以使用CSS选择器和not(:last-child)伪类:

.parent > div:not(:last-child) .interline {
  /* 样式在这里 */
  color: red;
}

在这个选择器中:

  • .parent选择parent类及其内部元素。
  • >选择子元素(孙子元素)。
  • div:not(:last-child)伪类排除最后一个div子元素。
  • .interline选择有interline类的孙子元素。

因此,这个选择器会选择所有位于parent类中的div子元素(孙子元素)的interline类元素,但不包括最后一个div子元素中的interline元素。

示例HTML:

<div class="parent">
    <div>
        <p class="interline">选择这个</p>
    </div>
    <div>
        <p class="interline">选择这个</p>
    </div>
    <div>
        <p class="interline">选择这个</p>
    </div>
    <div>
        <p class="interline">不选择这个</p>
    </div>
</div>

应用CSS样式后,只有前三个interline元素会变成红色,最后一个不会。

以上就是如何用CSS选择器排除孙子元素中的最后一个元素的特定类样式?的详细内容,更多请关注其它相关文章!