如何定位与同一层次结构中的其他元素共享其类名的元素？答案

【问题标题】：How to target an element that shares its class name with other elements in the same hierarchy?如何定位与同一层次结构中的其他元素共享其类名的元素？
【发布时间】：2019-11-19 01:38:18
【问题描述】：

<div class="menu">
   <ul>
     <li>
       <ul class="sub-menu">
         <li>
           <ul class="sub-menu">
             <li></li>
           </ul>
         </li>
       </ul>
     </li>
   </ul>
</div>

您能告诉我如何将第一个 ul 元素作为“子菜单”类的目标，如上例所示？我知道的每个伪类都同时针对两个“子菜单” ul-s。

【问题讨论】：

如果您要嵌套这样的元素，则不应为它们分配相同的类名，因为它们在语义上是不同的。第二个子菜单 UL 应该有第二个类名，如“sub”或只是与“sub-sub-menu”不同。这样，您可以使用以“子菜单”结尾的类名的属性选择器来定位所有子菜单，并且仍然可以通过“（n * sub）-menu”来定位各个层。只是一个提示。

标签： html css css-selectors

【解决方案1】：

一个选项：

ul:not(.sub-menu) > li > .sub-menu {
  ...
}

【讨论】：