CSS 'everything except last' 选择器的问题

Question

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

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

Answer 1

Here you go - you pretty much had it, just make sure to use the :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>

Answer 2

我不确定您是否正在寻找这个。但是如果你想为除最后一个项目之外的所有项目设置样式，请使用这样的东西：

.row:not(:last-child) {
    color: red;
}

Answer 3

这可能对您有帮助：

.box>.row:not(:last-of-type)

CSS 'everything except last' 选择器的问题

Issue with CSS 'everything except last' selector

css

pseudo-class