1. 目标与挑战：不依赖 :nth-child 与兄弟选择器的定位场景
定位需求的核心要点
在复杂的网页结构中，嵌套元素的定位往往成为性能与可维护性的拐点。核心目标是在不使用 :nth-child 与兄弟选择器的情况下，做到对嵌套元素的精准定位，以提升样式的稳定性和复用性。
这篇文章的核心议题是 CSS高级选择器实战：在不依赖 :nth-child 与兄弟选择器的情况下精准定位嵌套元素，从而帮助你在真实项目中显著降低对 DOM 顺序的耦合。
我们将着重介绍可维护、可预测的定位策略，强调通过结构标记、直接子关系以及现代伪类的组合来实现精准控制，避免因 HTML 变化引发的样式漂移。
2. 方案设计：直接子选择与结构化标记的组合
直接子关系的威力与局限
直接子选择器 > 能让你限定目标仅在直接子级中生效，避免了对后代的盲目影响。这种策略的关键是稳健的层级结构和清晰的类名设计。
为了实现长期可维护性，必须让 HTML 拥有明确的层级语义和标记规范，减少对顺序的依赖，从而避免在后续的结构调整中产生大量覆盖样式的修改。
在实际项目中，使用 直接子链 的定位方式往往比复杂的伪类组合更直观，也更易于静态分析和工具链优化。
/* 通过直接子关系限定路径，避免对后代的干扰 */
.main-nav > ul > li > a { color: #333; font-weight: 600; }/* 对嵌套结构中的特定区域使用明确的类名以增强可维护性 */
.main-nav > ul > li.item--has-sub > ul.submenu { display: none; }/* 当需要展示二级菜单时，通过直接子链展开二级区域 */
.main-nav > ul > li.item--has-sub:hover > ul.submenu { display: block; }结构化标记与定位稳定性的关系
对于嵌套元素的定位，结构化标记与 明确的类名 是关键因素。通过将行为与结构分离，可以让样式规则在不改变 DOM 顺序的前提下进行迭代和优化。
如果你需要对同一父级下的多种子结构进行统一定位，统一的层级规则与 数据驱动的标记将显著降低维护成本。
3. 现代伪类的协作：让定位更强大
利用 :is()、:where()、:not() 的组合
为了提升定位的灵活性，可以借助 CSS 的现代伪类组合来聚合不同的路径，而不依赖 :nth-child 或兄弟选择器。例如，:is() 可以将多条潜在路径聚合在一起，简化规则。
通过 :where() 可以降低选择器的特 specificity，使样式表更具容错性，同时保留对嵌套元素的精准控制。
此外，:not() 让你在排除某些嵌套路径时保持简单的定位结构，避免引入额外的层级依赖。
/* 使用 :is() 将两种嵌套结构定位合并到同一规则中，提升可读性 */
.main-content :is(.header, .section) { padding: 1rem; }/* 使用 :where() 提升性能并降低特异性，保持定位一致性 */
.main-content > :where(.sub, .widget) { border: 1px solid #ddd; }/* 通过 :not() 排除不需要的嵌套路径，简化选择逻辑 */
.grid > li:not(.disabled) > a { color: #222; }4. 语义化标记与数据属性：提高可维护性和定位的稳定性
将定位逻辑委托给结构标记
为避免对 DOM 顺序的硬性依赖，尽量用 语义化标记、类命名约定、以及 数据属性 来承载定位信息。这能让样式与结构的耦合度降至最低。
通过数据属性（如 data-role、data-type 等），你可以在不修改标记的情况下，灵活地将嵌套元素分组并应用统一样式。
/* 使用数据属性定位嵌套元素，便于后续扩展与维护 */
.card [data-role="title"] { font-weight: bold; }.card > [data-role="content"] { padding: 0.5rem; }/* 结合直接子关系，确保目标区域仅在特定父级内生效 */
.section[data-layout="two-column"] > .column { width: 50%; }5. 实战案例：嵌套导航的精准定位
案例背景与实现要点
在一个多层级的导航结构中，我们需要对二级及以上级别的链接进行统一的样式控制，而不依赖于元素的出现顺序。案例中的要点是使用明确的层级关系和数据标记，确保嵌套深度变化时样式保持稳定。
通过结合直接子选择、数据属性标记以及现代伪类，我们可以实现一个可维护且对结构变化具备容错性的定位方案。核心策略是用结构标签和属性来驱动定位，而非位置依赖。
<nav class="site-nav" aria-label="主导航"><ul class="primary"><li class="item" data-group="home"><a href="#">首页</a></li><li class="item" data-group="products"><a href="#">产品</a><ul class="submenu"><li class="subitem"><a href="#">硬件</a></li><li class="subitem"><a href="#">软件</a></li></ul></li><li class="item" data-group="about"><a href="#">关于</a></li></ul>
</nav>/* 精准定位嵌套导航的核心样式，不依赖 :nth-child */
.site-nav > ul.primary > li.item > a { color: #333; }
.site-nav > ul.primary > li.item[data-group="products"] > ul.submenu { display: none; }/* 当鼠标悬停时展开二级菜单，仍然遵循直接子结构定位 */
.site-nav > ul.primary > li.item[data-group="products"]:hover > ul.submenu { display: block; }/* 二级菜单内链接的统一样式，依旧不依赖顺序位置 */
.site-nav > ul.primary > li[data-group="products"] > ul.submenu > li.subitem > a { color: #555; }