Html 如何使用CSS3选择层次结构中的最后一个元素？

我有一个层次结构，我想选择树中最后的元素，例如没有子元素的元素

这是我的代码的一部分。CSS是我的项目的副本：

正如您所见，我已经设置了一个简单的层次结构。我想要的是最后的元素不显示“-”或“+”符号。我尝试了以下方法，但没有成功：

.tree div:nth-last-of-type(n) input[type=checkbox] + label::before{
  content: "";
}

当我应用这个规则时，没有一个元素显示出什么。我已经玩了一段时间了，但是我想不出来

我需要什么样的CSS才能使最后的元素不显示“-”和/或“+”文本？

试试这个

.tree li:last-child ul div input[type=checkbox] + label::before{
  content: "\00a0";
}

您需要进行一些更改 您当前的html不允许像您寻求的那样使用纯css解决方案。如果你能改变你的html，那么你就有机会实现你想要的

首先，所有

div

元素也需要包装

ul

元素，以便

输入

和

标签

成为

ul

的同级。因此，

输入上的
：选中的
指示器可用于操纵符号，该符号将在
ul
内部产生，如下所述

通过仅对
div
元素设置
position:relative
，我们可以在
元素上使用
position:absolute
：before
从
ul
内部的
li
元素创建所需的
+
和
-
符号。这样，无论您是否有空的
ul
或根本没有
ul
，在这两种情况下，您都不会得到
+/-
符号，因为您没有子
li

实现了这一点（请注意，
标签上的间隔符
：：before
元素为绝对定位的符号“land”创造空间）

它在html中为每个项目使用此结构（全部包装在一个整体
.tree
包装中）：

两种后果/限制（至少）
您不能将
li
或
ul
设置为除
位置：静态
（默认位置）之外的任何位置，因此如果需要，这将不起作用。另外，我假设您正在通过
输入
在某种切换上控制
ul
的显示。请注意，您不能实际设置
显示：无
（否则
+/-
将消失），而是需要通过其他方式隐藏它，例如
高度：0；可见性：隐藏；保证金：0；溢出：隐藏

更新：删除了隐藏版本的
行高：0
，因为它干扰了
+/-
的显示（可以设置，但需要为
：：在
之前重置）

显示
B.1
隐藏。
可能重复@thgaskell不这不是重复，因为我想用纯CSSRight解决它。。但主要的一点是，你不能通过纯CSS来选择它。HTML是如何生成的？最简单的解决方法是用类标记这些div。很抱歉，这不是我的意思。在你的情况下，只有B.1没有文本。我还希望A1.1、A1.2和A1.3没有文本。这正是BoltClocks解决方案的作用。感谢您的大量帖子和解释。
<div>
   <input type="checkbox" id="yourId"/>
   <label for="yourId">Label</label>
   <ul></ul>  <!-- optional; could be missing, and may or may not have li -->
</div>

.tree div {
    position: relative;
}

.tree label::before {
    content: "\00A0\00A0\00A0"; /* create space */
}

.tree input[type=checkbox] ~ ul > li:first-child::before {
    content: "+ ";
    position: absolute;
    top: 0;
    left: 0;
    visibility: visible;
}

.tree input[type=checkbox]:checked ~ ul > li:first-child::before {
    content: "- ";
    position: absolute;
    top: 0;
    left: 0;
    visibility: visible;
}