一、不使用 :nth-child 的前提下，如何定位父元素中的第一子元素
方法一：直接使用 :first-child 进行精准定位
核心要点是当一个元素位于父容器的首位且是父容器的第一个子元素时，:first-child 就会生效。通过这种方式可以实现对第一子元素的高效选择，而无需使用任何 :nth-child 相关技巧。
在实际布局中，若父容器中的第一项需要特殊样式，例如设置颜色、边框或间距，优先使用 :first-child可以避免额外的类名标记，同时保持结构的简洁与语义性。
/* 假设 .panel 是父元素，第一项需要特殊背景色 */
.panel > :first-child {background: #f0f8ff;border-top: 2px solid #1e90ff;
}
要点提醒：该选择器仅在元素严格位于父容器的第一位时生效；如果父容器第一位是文本节点等非元素节点，浏览器会忽略文本节点，仍然以实际的第一个元素子项为准。
方法二：结合 :first-of-type 的语义化定位
如果你的父元素中可能混杂不同标签，但你只关心第一类标签的首个实例，可以使用 :first-of-type。它不依赖于父容器中的真实子元素顺序，而是按类型分组后定位第一项。
在组件化的前端开发中，使用 :first-of-type 可以提升可维护性，避免因子元素的变化而引入额外的类名或 JS 脚本来调整样式。
/* 设定父容器 .list 的第一种类型项的样式 */
.list > :first-of-type {color: #2a9d8f;
}
实战要点：当你明确知道第一项的“类型”时，使用 :first-of-type 可以降低对 DOM 结构的依赖，并提高在结构调整后的鲁棒性。
二、在父元素中定位最后一个子元素的实战方法
方法一：利用 :last-child 实现最后一项的定位
核心定位点在于：如果某元素是父容器的最后一个子元素，那么 :last-child 就是它。该技巧在需要对最后一项变更边距、颜色或尺寸时尤为直接。
通过简单选择即可覆盖整个场景，不需要额外的标记或脚本，保持样式表的简洁与高效。
/* 父元素 .items 的最后一个子元素应用不同的样式 */
.items > :last-child {margin-bottom: 0;border: none;
}
注意点：若父元素中存在多种子元素，:last-child 将选中最后一个元素子项，而非最后一个类型的子项；若要按类型定位，需要使用 :last-of-type。
方法二：结合 :last-of-type 的语义定位
当你关注的是某种具体标签类别在父容器中的最后一个实例时，:last-of-type 提供了更强的语义保障。它不受 DOM 中其他类型元素的影响，确保选中的是“该类型的最后一个子元素”。
在维护不同组件时，使用 :last-of-type 可以避免因为内部元素种类繁多而错位应用样式，提升可读性与稳定性。
/* 对父容器 .cards 中最后一个与 同类型的子元素应用样式 */
.cards > article:last-of-type {box-shadow: 0 0 0 2px #ddd;
}
要点总结：若你的布局结构中需要对“最后一个同类型子元素”做样式定制时，last-of-type 提供了更明确的语义表达，且与 :nth-child 无关，符合“不使用 :nth-child”的要求。
三、如何在不使用 :nth-child 的前提下定位中间子元素
方法一：使用 :not(:first-child):not(:last-child) 精准定位中间项
如果目标是对“中间项”统一应用某类样式，可以利用组合选择器 :not() 同时排除第一和最后一个子元素。
这一做法在网格、列表或卡片集合的美化中非常常见，可以批量处理中间项而不必为每一项单独标记类名。
/* 对父元素 .grid 的中间项应用样式 */
.grid > *:not(:first-child):not(:last-child) {padding: 8px 12px;
}
实现要点：当前元素需要同时满足“不是第一项”和“不是最后一项”，才会应用样式，从而实现“中间项”的统一处理。
方法二：结合数据属性或类名，标记中间项的实现方案
作为另一种稳健的实践，可以在 HTML 结构中对中间项进行数据标记，例如 <div data-position="middle">，然后使用属性选择器进行定位。
此方法的优势在于当你需要对中特定位置的项目进行独立控制，且布局经常变化时，标记位置信息比 CSS 选择器逻辑更直接、可维护。
/* 使用数据属性对中间项进行样式控制 */
.grid > [data-position="middle"] {background: #fffbe6;border-radius: 6px;
}
设计要点：数据驱动的定位在复杂布局中更易维护，尤其是当子元素数量频繁变化时，可以避免对选择器进行反复调整。
四、综合对比：不依赖 :nth-child 的多种实战组合
综合实战要点一：从语义出发，优先使用 first-child / last-child 组合
在常规列表或容器中，优先使用 :first-child 与 :last-child，能让样式表具备更直观的语义含义，便于后续维护和协作。
通过合理的组合，甚至可以实现对“中间项”的统一处理，而无需借助复杂的通用选择器。
/* 第一项、最后一项和中间项的统一样式示例 */
.list > * { padding: 6px 10px; } /* 全部项通用样式 */
.list > :first-child { background: #eef6ff; } /* 第一项 */
.list > :last-child { margin-bottom: 0; } /* 最后一项 */
.list > :not(:first-child):not(:last-child) { border-left: 1px solid #ccc; } /* 中间项 */
综合实战要点二：结合结构化标签提升鲁棒性
若你的页面结构允许，将第一、最后或中间子元素的定位尽量与具体标签绑定（如 li、section、article），可进一步提升样式的鲁棒性和可维护性。
在团队协作中，这种做法也能减少因结构调整带来的样式错位问题，确保“精准选中”在不同场景下都能稳定工作。
/* 针对列表项的稳定定位示例（假设统一是 ） */
.list > li:first-child { color: #1a73e8; }
.list > li:last-child { color: #e91e63; }
.list > li:not(:first-child):not(:last-child) { border-right: 2px solid #ddd; }
