在各种嵌套容器中选择最后一个元素
如何选择CSS中的最后一个元素和最深的元素？
有没有办法改善此CSS代码？
您为深树提出了什么解决方案？（〜15-25）。
我避免使用javascript。但是欢迎使用SASS解决方案（也许使用@for？）
/*level 1*/
div.case > ul:last-child > li.leaf:last-child > div {
font-weight: bold;
background: red;
}
/*level 2*/
div.case > ul:last-child > li.expanded:last-child > ul > li.leaf:last-child {
font-weight: bold;
background: blue;
}
/*level 3*/
div.case > ul:last-child > li.expanded:last-child > ul > li.expanded:last-child > ul > li.leaf:last-child {
font-weight: bold;
background: green;
}
/*level 4*/
div.case > ul:last-child > li.expanded:last-child > ul > li.expanded:last-child > ul > li.expanded:last-child > ul > li.leaf:last-child {
font-weight: bold;
background: yellow;
}
<div class="case">
<h1>Case 0</h1>
<ul>
<li class="expanded">
<div>1. content</div>
<ul>
<li class="leaf">
<div>1. content</div>
</li>
<li class="leaf">
<div>2. content</div>
</li>
</ul>
</li>
<li class="expanded">
<div>2. content</div>
<ul>
<li class="leaf">
<div>1. content</div>
<ul>
<li class="leaf">
<div>1. content</div>
</li>
<li class="leaf">
<div>2. content</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="leaf">
<div>3. content (bold)</div>
</li>
</ul>
</div>
<div class="case">
<h1>Case 1</h1>
<ul>
<li class="expanded">
<div>1. content</div>
<ul>
<li class="leaf">
<div>1. content</div>
</li>
<li class="leaf">
<div>2. content</div>
</li>
</ul>
</li>
<li class="expanded">
<div>2. content</div>
<ul>
<li class="leaf">
<div>1. content</div>
<ul>
<li class="leaf">
<div>1. content</div>
</li>
<li class="leaf">
<div>2. content</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="expanded">
<div>3. content</div>
<ul>
<li class="leaf">
<div>1. content</div>
</li>
<li class="leaf">
<div>2. content</div>
</li>
<li class="leaf">
<div>3. content (bold)</div>
</li>
</ul>
</li>
</ul>
</div>
<div class="case">
<h1>Case 2</h1>
<ul>
<li class="expanded">
<div>1. content</div>
<ul>
<li class="leaf">
<div>1. content</div>
</li>
<li class="leaf">
<div>2. content</div>
</li>
</ul>
</li>
<li class="leaf">
<div>2. content</div>
<ul>
<li class="leaf">
<div>1. content</div>
</li>
<li class="leaf">
<div>2. content</div>
</li>
<li class="leaf">
<div>3. content</div>
</li>
</ul>
</li>
<li class="expanded">
<div>3. content</div>
<ul>
<li class="expanded">
<div>1. content a</div>
<ul>
<li class="leaf">
<div>1. content</div>
</li>
<li class="leaf">
<div>2. content (bold)</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="case">
<h1>Case 3</h1>
<ul>
<li class="expanded">
<div>1. content</div>
<ul>
<li class="leaf">
<div>1. content</div>
</li>
<li class="leaf">
<div>2. content</div>
</li>
</ul>
</li>
<li class="expanded">
<div>2. content</div>
<ul>
<li class="leaf">
<div>1. content</div>
<ul>
<li class="leaf">
<div>1. content</div>
</li>
<li class="leaf">
<div>2. content</div>
</li>
</ul>
</li>
</ul>
</li>
<li class="expanded">
<div>3. content</div>
<ul>
<li class="expanded">
<div>2. content</div>
<ul>
<li class="expanded">
<div>1. content</div>
<ul>
<li class="leaf">
<div>1. content</div>
</li>
<li class="leaf">
<div>2. content (bold)</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="case">
<h1>Case 4</h1>
<ul>
<li class="expanded">
<div>1. content</div>
<ul>
<li class="leaf">
<div>1. content</div>
</li>
<li class="leaf">
<div>2. content</div>
</li>
</ul>
</li>
<li class="expanded">
<div>2. content</div>
<ul>
<li class="expanded">
<div>2. content</div>
<ul>
<li class="expanded">
<div>1. content</div>
<ul>
<li class="leaf">
<div>1. content</div>
</li>
<li class="leaf">
<div>2. content</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="expanded">
<div>3. content</div>
<ul>
<li class="expanded">
<div>1. content</div>
<ul>
<li class="leaf">
<div>1. content</div>
</li>
<li class="leaf">
<div>2. content(bold)</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="case">
<h1>Case 5</h1>
<ul>
<li class="leaf">
<div>content 1</div>
</li>
<li class="leaf">
<div>content 2</div>
</li>
<li class="leaf">
<div>content 3(bold)</div>
</li>
</ul>
</div>
问题答案：
如果我正确理解了您的问题，则希望将s中的最后一个li标记作为目标ul，其中s中的嵌套级别数ul是不可预测的。
您需要一个选择器，该选择器以包含块中的“最后和最深元素”为目标，而该块中位于其前面的元素数是未知且不相关的。
[选择器2.1] 或选择器3] 似乎无法做到这一点。
的:last-child，:last-of-type而nth- child当嵌套级别是固定的伪类的工作。在动态环境中，有多个嵌套级别不同的列表，这些选择器规则将中断。
这将选择li第一级中的最后一个ul：
div.case > ul > li:last-child
这将选择li第二个级别中的最后一个ul：
div.case > ul > li:last-child > ul > li:last-child
这将选择li第三级中的最后一个ul：
div.case > ul > li:last-child > ul > li:last-child > ul > li:last-child
等等…
但是， 选择器4中可能存在一个解决方案，该浏览器尚未实现：
li:last-child:not(:has(> li))
此规则针对li没有后代li的最后一个子项s，它符合您的要求。
但是，现在，如果您知道每个ul容器的嵌套级别，则可以将类应用于每个target li。
感谢@BoltClock协助制定Selectors 4规则（请参阅注释）。
-
假设我有一个这样的列表： 我想要一个只包含嵌套列表的第一个元素的列表。我可以通过这样返回另一个列表来做到这一点 这个有捷径符号吗？
-
问题内容： 我的目标是在最后一个CSS上使用CSS ，但是这样做不是。 如何 只 选择最后一个孩子？ 问题答案： 该伪类仍然无法可靠地跨浏览器使用。特别是，InternetExplorer<9和Safari<3.2绝对不支持它，尽管Internet Explorer 7和Safari 3.2 确实 支持。 最好的选择是向该项目显式添加一个（或类似的）类，然后应用。
-
问题内容： hello 我要选择吗？ 只要我在commentList中还有另一个作为实际的最后一个孩子，那就行不通。在这种情况下是否可以使用last- child选择器来选择的最后出现？ 问题答案： 仅在有问题的元素是容器的最后一个子元素而不是特定类型的元素的最后一个元素时起作用。为此，你想要 根据@BoltClock的注释，这仅检查最后一个元素，而不检查类为的最后一个元素。
-
问题内容： 给定 当我不知道n是什么时，如何选择最后一个’service-n’行？我尝试添加，但是没有用。 我有： 但它选择第一行，而我要最后一行。 我无法使用，因为实际上’service-n’行的数量是动态的，并且变化很大。 问题答案： 答案正是我把[last（）]放在哪里，我把它放在错误的地方 它在这里： 不在这里：
-
问题内容： 我创建了一个客户c＃DropDownList控件，可以将其内容呈现为optgroup（不是从头开始，我编辑了一些在Internet上找到的代码，尽管我确切地了解了它的作用），并且工作正常。 但是，我现在遇到一种情况，我需要在下拉菜单中有两个缩进级别，即 但是，在上面的示例代码段中，它呈现的缩进量与相同。 有没有一种方法可以产生我想要的嵌套optgroup行为？ 问题答案： 好的，如果有
-
问题内容： 我很好奇，是否有任何一种方法可以在Django中进行查询，而该查询并非位于下方。我正在尝试执行。 具体来说，我有一个看起来像这样的模型： 其中是内的排名。我希望能够遍历所有类别，对该类别中的每个等级进行一些操作。 我想先获取系统中所有类别的列表，然后查询该类别中的所有产品，然后重复进行直到处理完每个类别。 我宁愿避免使用原始SQL，但是如果我必须去那里，那很好。尽管我以前从未在Djan