如何使用CSS选择器精准选择特定class孙子元素，并排除最后一个？

巧用CSS选择器，精准选择特定class孙子元素，排除最后一个

想要在html中选择某个class元素的孙子元素，却不包括最后一个孙子元素，以下css选择器可以帮到你：

.parent > div:not(:last-child) .interline {
  /* 你的样式设置 */
}

• .parent：选择拥有"parent" class的父元素
• > div：选择父元素下的所有"div"子元素
• :not(:last-child)：排除div子元素中的最后一个
• .interline：选择div子元素下拥有"interline" class的孙子元素

这样一来，CSS选择器会选中代码提供的HTML示例中所有"interline" class的孙子元素，除了最后一个。代码示例：

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

.parent > div:not(:last-child) .interline {
  color: red;
}

样式应用后，父元素下的所有"interline" class的孙子元素（除了最后一个）会被渲染成红色，满足题目的要求。

以上就是如何使用CSS选择器精准选择特定class孙子元素，并排除最后一个？的详细内容，更多请关注其它相关文章！