CSS 选择器首先是 child ，而不是 sibling

Question

如何只选择元素的第一个实例而不触发任何子元素的选择器？ child 是后代，而不是 sibling 。

在示例中，ul:first-of-type 将通过任何子菜单(ul ul、ul li ul 和ul ul ul ul ul ul) 也会被选中。我只想选择 #menu 中的 ul 元素的第一个实例。

我可以执行以下操作，尽管它毫无意义地令人费解。

#menu ul:not(ul ul):not(ul ul ul):not(ul ul ul ul) {property: value;}

不，我也不能执行 #menu > ul，因为 #menu 和 ul 之间的元素数量不同。

<nav id="menu">/* display: flex; justify-content: space-between; */
<div>
<ul>/* Primary, select THIS ul (no > in selector!) */
 <li>Menu</li>
 <li>Menu</li>
 <li>Menu
 <ul>/* Secondary menu. */
 <li>Menu</li>
 <li>Menu
  <ul>/* Tertiary menu. */
  <li>Menu</li>
  <li>Menu</li>
  <li>Menu</li>
  </ul>
 </li>
 <li>Menu</li>
 </ul> 
 </li>
 <li>Menu</li>
</ul>
</div>
<div>
/* Auxiliary menu items on right side of menu bar, may contain ul (do not select these either). */
</div>
</nav>

Answer 1

至少在写这篇文章的时候，并且在浏览了一些广泛的选择器列表之后，至少看起来所有类型选择器都是基于 sibling ，而不是后代。因此，为了使菜单中的第一个 ul 元素具有 height: 100% 而不影响第二个和第三个 ul 元素，我添加了第二个选择器.

#menu ul, #menu ul > li, #menu ul > li > a {align-items: center; display: flex; height: 100%;}
#menu ul ul {height: initial;}

这在一定程度上允许我将下拉菜单始终水平居中放置在主菜单下方，并结合用于主标题总高度的 CSS 变量(菜单是其中的后代)。

因为我在平台上工作，所以我不能随意添加 CSS 类，因此我必须利用可用的选择器。

希望在未来 CSS 选择器将继续扩展，除了兄弟选择器之外还包括后代选择器。