在各种嵌套容器中选择最后一个元素
如何选择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行为？ 问题答案： 好的，如果有
-
问题内容： 我正在插入一条记录，我想使用插入的最后一条记录的ID。这是我尝试过的： 我收到错误消息： SQL语法错误；请查看与您的MySQL服务器版本相对应的手册，以在“ SELECT LAST_INSERT_ID（）”附近使用正确的语法。谁能告诉我我的错误在哪里？谢谢！ 问题答案： 签出mysql_insert_id（） 在mysql_query（）命令中执行INSERT语句后运行该函数时，其结