Question

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

这是一个模拟我的代码的小提琴。 CSS是我项目的副本：

正如您所看到的，我已经设置了简单的层次结构。我想要的是最后的元素不显示' - '或'+'符号。我试过以下，但没有运气：

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

当我应用此规则时，没有任何元素显示某些内容。我已经玩了一段时间了，但我无法理解。

我需要什么CSS，所以最后的元素不会显示' - '和/或'+'文字？

Answer 1

您需要进行一些更改

您当前的HTML不允许像您寻求的纯粹的CSS解决方案。如果你可以改变你的html，那么你就有机会实现你想要的目标。

首先，您的所有div元素也需要包含ul元素，以便input和label成为ul的兄弟。这样:checked上的input指示符可用于操纵符号，该符号将在ul内部生成，如下所述。

通过仅将position: relative设置为div元素，我们可以对position: absolute 内的::before元素使用li ul创建您想要的+和-符号。这样，无论您是空ul还是没有ul，在任何一种情况下，您都没有获得+/-符号，因为您没有孩子li。

Here is an example fiddle 实现了此功能（请注意::before上的label元素，以便为绝对定位的符号创建空间“登陆”

它在每个项目的html中使用此结构（全部包含在整个.tree包装器中）：

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

此css控制+/-的显示（更新：已添加visibility: visible，以便在父ul为hidden时进行偏移。）：

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

两个后果/约束（至少）

您无法将li或ul设置为position: static（默认位置）以外的任何内容，因此如果需要，则无效。此外，我假设您正在使用ul控制input在某种切换上的显示。请注意，您实际上无法设置display: none（否则+/-会消失），而是需要通过其他方式隐藏它，例如height: 0; visibility: hidden; margin: 0; overflow: hidden;。

更新：删除line-height: 0隐藏版本，因为它与+/-的显示相混淆（可以设置，但需要重置为::before）。

Here's an example fiddle 显示隐藏B.1。

Answer 2

试试这个

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

<强> DEMO

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

2 个答案:

您需要进行一些更改

两个后果/约束（至少）