用于嵌套 UL LI 的 CSS 选择器答案

【问题标题】：CSS Selectors for Nested UL LI用于嵌套 UL LI 的 CSS 选择器
【发布时间】：2023-03-23 00:05:01
【问题描述】：

我正在尝试设置嵌套列表的特定元素的样式，而不使用类。具体来说，看看下面的例子，我将如何只为带有彩色背景的“SubList Item”元素设置样式，而不是“Main List”、“SuperSub List”和“SuperDuperSub List”项目中的任何一个？

<div>
   <ul>
      <li><a>Main List Item</a></li>
      <li><a>Main List Item</a>
         <ul>
            <li><a>SubList Item</a></li>
         </ul>
      </li>
      <li><a>Main List Item</a></li>
      <li><a>Main List Item</a></li>
      <li><a>Main List Item</a>
         <ul>
            <li><a>SubList Item</a></li>
            <li><a>SubList Item</a>
               <ul>
                  <li><a>SuperSub List</a></li>
                  <li><a>SuperSub List</a>
                     <ul>
                        <li><a>SuperDuperSub List</a></li>
                        <li><a>SuperDuperSub List</a></li>
                     </ul>
                  </li>
               </ul>
            </li>
            <li><a>SubList Item</a></li>
            <li><a>SubList Item</a></li>
         </ul>  
      </li>
      <li><a>Main List Item</a></li>
   </ul>
</div>

【问题讨论】：

请阅读stackoverflow.com/help/mcve
好的，我读了。请下一个指令。
@lang 这不是给你的指令。只是我这边的一个建议。添加完整代码（CSS）始终是最佳实践，SO 中的人们首先想知道您到目前为止尝试了什么。我在您的问题中看到了一些反对意见，这就是我与您共享链接的原因，以便您可以添加最少的代码。如果您认为我在这里做错了什么，对不起

标签： css nested css-selectors html-lists pseudo-class

【解决方案1】：

这是一种基于您的标记的方法，尽管我个人会说尽可能使用类。

div > ul > li > ul > li > a {
  background: #000;
}

【讨论】：

谢谢。我知道我已经很接近了，我需要添加 div 和 a 元素以使其工作。不幸的是，如果没有类，似乎不可能只针对 li 元素。同意吗？
在 li 上添加背景。您将针对特定的 li 元素，但由于其中包含 uls，背景将覆盖所包含的区域，因此文本来自 a 标签。