css - CSS 'everything except last' 选择器问题

标签 css pseudo-class

我有一个子列表列表。每个子列表都有自己的子列表。我需要对除最后一个子列表之外的所有应用样式。我使用:

.list:not(:last-child) > .sublist {
  color: red;
}

但是它正在申请所有的子列表。这是一个演示代码( fiddle : http://jsfiddle.net/8m72m53r/3/ ):

:not(:last-child) > .row {
  color: red;
}
<ul class="box">
  <li class="row">One</li>
  <li class="row">Two</li>
  <li class="row">Three</li>    
</ul>
<ul class="box">
  <li class="row">FOur</li>
  <li class="row">Five</li>
  <li class="row">Six</li>    
</ul>
<ul class="box">
  <li class="row">Seven</li>
  <li class="row">Eight</li>
  <li class="row">Nine</li>    
</ul>

最佳答案

Here you go - 你几乎拥有它,只要确保使用 :last-of-type pseudoclass

.box:not(:last-of-type) > .row {
    color: red;
}
<ul class="box">
    <li class="row">One</li>
    <li class="row">Two</li>
    <li class="row">Three</li>    
</ul>
<ul class="box">
    <li class="row">FOur</li>
    <li class="row">Five</li>
    <li class="row">Six</li>    
</ul>
<ul class="box">
    <li class="row">Seven</li>
    <li class="row">Eight</li>
    <li class="row">Nine</li>    
</ul>

关于css - CSS 'everything except last' 选择器问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44774858/

相关文章:

html - 在 Bootstrap 网格系统中居中图像

html - CSS 垂直对齐 : middle not working on nav bar with text to the left and login link to the right

javascript - 学习页面加载时间

html - 我有六张图片和六段文字摘录,我希望每行两张图片,相关文字位于下方

css - 背景图片大小调整问题

css - 输入 :not(:placeholder-shown) ~ label selector does not work with autofill

css - 哪些 CSS 伪类没有特异性?

css - Less css 中的嵌套伪类

html - CSS 选择器 :almost-empty?