节点中last元素的css选择器答案

【问题标题】：css selector for lasts elements in nodes节点中last元素的css选择器
【发布时间】：2018-01-29 20:13:00
【问题描述】：

我需要选择特定节点中的所有 lasts 元素。我的问题是：在这种情况下选择器应该是什么？

下面有 html-code 的大致视图。需要在ul 中选择所有最后一个li，这是在li.node（li 与类节点）内。

.node>ul>li:last-child {
  color: red
}

<ul>
  <li>xxx</li>
  <li>www</li>
  <li class='node'>
    <ul>
      <li>ddedede</li>
      <li>dededed</li>
      <li class='node'>
        <ul>
          <li>dededede</li>
          <li>dededede</li>
          <li>dedede</li>
          <li>dededede</li>
          <li>defefefe</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>vrvrvrvr</li>
  <li>vvrvrvr</li>
</ul>

那个选择器不能解决问题。

.node > ul > li:last-child {
  color: red
}

所以，我应该澄清我的问题。我已经动态生成了树视图的 html 代码（我无法编辑 html 代码）。因此，我需要选择 li.node 中没有类 .node 的所有 lasts li（在下图中，您可以看到示例（红色圆圈粗体）元素 li，我需要使用特定的 css-selector 来选择这些元素，如图所示html-code 用于示例演示）。但是应该是什么样的选择器呢？

提前谢谢你！

【问题讨论】：

您要选择第一个
和最后一个上方的 li 吗？请加粗你要选择的内容

【解决方案1】：

您的选择器是正确的并且工作正常，但是您选择了两个元素，如下所示：

这就是为什么所有元素都是红色的。相反，如果您只想定位最后一个 li，则可以使用此选择器：

.node > ul > li:not(.node):last-child {
  color: red
}

<ul>
  <li>xxx</li>
  <li>www</li>
  <li class='node'>
    <ul>
      <li>ddedede</li>
      <li>dededed</li>
      <li class='node'>
        <ul>
          <li>dededede</li>
          <li>dededede</li>
          <li>dedede</li>
          <li>dededede</li>
          <li>defefefe</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>vrvrvrvr</li>
  <li>vvrvrvr</li>
</ul>

更新

我认为您找不到 CSS 选择器来选择您想要的元素，但如果您愿意，这里有一个 jQuery 解决方案：

$('.node > ul').each(function() {
 $(this).find(' > li:not(.node):last').css('color','red');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>xxx</li>
  <li>www</li>
  <li class='node'>
    <ul>
      <li>ddedede</li>
      <li>dededed</li>
      <li class='node'>
        <ul>
          <li>dededede</li>
          <li>dededede</li>
          <li>dedede</li>
          <li>dededede</li>
          <li>defefefe</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>vrvrvrvr</li>
  <li>vvrvrvr</li>
</ul>

【讨论】：

【解决方案2】：

一个更简单的解决方案是提供与父类名称不同的类名称。

.node1 > ul > li:last-child {
  color: red
}

<ul>
  <li>xxx</li>
  <li>www</li>
  <li class='node'>
    <ul>
      <li>ddedede</li>
      <li>dededed</li>
      <li class='node1'>
        <ul>
          <li>dededede</li>
          <li>dededede</li>
          <li>dedede</li>
          <li>dededede</li>
          <li>defefefe</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>vrvrvrvr</li>
  <li>vvrvrvr</li>
</ul>

【讨论】：

【解决方案3】：

您可能需要像这样调整您的 html：

<!DOCTYPE html>
<html>
<head>
<style> 
li:last-child {
    background: red;
}
</style>
</head>
<body>

<ul>
  <li>xxx</li>
  <li>www</li>
  <li class='node'>
    <ul>
      <li>ddedede</li>
      <li>dededed</li>
      <li class='node'></li>
        <ul>
          <li>dededede</li>
          <li>dededede</li>
          <li>dedede</li>
          <li>dededede</li>
          <li>defefefe</li>
        </ul>

    </ul>
  </li>
  <li>vrvrvrvr</li>
  <li>vvrvrvr</li>
</ul>

</body>
</html>

这是您期望的结果吗？在这里试试https://www.w3schools.com/code/tryit.asp?filename=FNV0QCY8G4IP

【讨论】：