Question

我在列表中有一个列表，在内部列表中我需要选择最后一个列表项。内部列表如下：

<ol>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li class="x">...</li>
</ol>

但我必须忽略类x的项目。 DEMO

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

我希望C为红色，但它不起作用。有人可以向我解释问题是什么，如果可能的话，解决方案会很棒:) Thnx

Answer 1

正如我在my answer here中所解释的那样，:last-child选择器无法正常工作。此选择器仅指向一个元素，它始终是其父元素的最后一个子元素。所选的子项不会根据附加到选择器的其他条件进行更改。只有受附加条件影响的是是否选择了最后一个子元素本身。

以下选择器仅表示 选择最后一个子li元素，如果它没有类x 而不是选择最后一个子li元素有x级。

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

即使在选择器等级4中也没有计划引入以前的兄弟选择器，我不认为它们会被引入，因为这违背了级联的含义样式表。

~~然而，在Level 4中有一个选择器可以解决这样的情况，它是:nth-last-match伪选择器。对于您的情况，它最终可能会出现如下情况：~~

~~li li:nth-last-match(1 of :not(.x))~~

我假设nth-last-match将允许否定选择器，因为没有提及它是无效的even though :matches(:not(...)) is said to be invalid。它有可能被标记为无效，在这种情况下，我们仍然会发现很难选择这样的元素。

根据latest Editor's Draft of the spec，似乎:nth-last-match选择器不再在范围内（并且已被包含到:nth-last-child选择器中）。因此，选择器将改为：

li li:nth-last-child(1 of :not(.x))

它还讨论了另一个可能对这种情况有用的问题。它是:has伪选择器。

li li {
  color: red; /* apply the styling which needs to be set to the last child without class x */
}
li li:has( ~ li:not(.x)) { /* this selects all li which have a sibling whose class is not x */
  color: black; /* override the style for these alone and set them to the default */
}

^{注意：这只是一个草稿，可以更改。功能}

一种可能的解决方案是使用jQuery（或JavaScript）找出满足条件的最后一个元素，然后为其设置所需的样式或类。

＆＃13;

$(document).ready(function() {
  $('li ol').map(function() {
    return $(this).children().not('.x').get(-1);
  }).css('color', 'red');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
  <li>
    <ol>
      <li>A</li>
      <li>B</li>
      <li class="x">X</li>
    </ol>
  </li>
  <li>
    <ol>
      <li>A</li>
      <li>C</li>
      <li class="x">X</li>
    </ol>
  </li>
  <li>
    <ol>
      <li>A</li>
      <li>D</li>
      <li class="x">X</li>
    </ol>
  </li>
  <li>
    <ol>
      <li>A</li>
      <li>D</li>
      <li class="ex">X</li>
    </ol>
  </li>
</ol>

＆＃13;

选择某种类型的最后一个孩子

1 个答案: