如何选择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是不可预测的。
li
ul
您需要一个选择器，该选择器以包含块中的“最后和最深元素”为目标，而该块中位于其前面的元素数是未知且不相关的。
[选择器2.1] 或选择器3] 似乎无法做到这一点。
的:last-child，:last-of-type而nth- child当嵌套级别是固定的伪类的工作。在动态环境中，有多个嵌套级别不同的列表，这些选择器规则将中断。
: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规则（请参阅注释）。
