时间戳

首页 > 解决方案 > CSS 选择器第一个孩子，而不是兄弟姐妹

css - CSS 选择器第一个孩子，而不是兄弟姐妹

问题描述

如何只选择元素的第一个实例而不触发任何子元素的选择器？孩子是后代，而不是兄弟姐妹。

例如ul:first-of-type，将通过任何子菜单选择第一个无序列表 (ul ul也将选择任何子菜单（ul li ul和ul ul ul ul ul）。我只想在.ul#menu

我可以做以下事情，尽管它毫无意义地令人费解。

#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>

标签： csscss-selectors

解决方案

至少在这篇文章的时候，并且已经浏览了一些广泛的选择器列表，至少看起来所有类型选择器都是基于兄弟姐妹，而不是后代。因此，为了使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 选择器将继续扩展，除了兄弟选择器之外还包括后代选择器。

推荐阅读