本教程深入探讨在css选择器受限（禁止使用`:nth`伪类、属性选择器`[data-*]`、兄弟选择器`+`和`~`）的情况下，如何巧妙地利用`:first-child`、`:last-child`和`:not()`组合来定位元素的第一个、最后一个或中间子元素。文章通过实例代码详细解析了实现不同定位需求的单一选择器策略。
引言
在前端开发中，CSS选择器是定位和样式化HTML元素的核心工具。然而，在某些特定的场景，例如前端技能竞赛、代码挑战或为了兼容旧版浏览器（尽管:nth-child支持良好），我们可能会面临严格的选择器使用限制。当:nth-child、:nth-of-type、[data-*]属性选择器以及兄弟选择器+和~都被禁止时，如何精确地选择父元素中的第一个、最后一个或中间子元素成为了一个有趣的挑战。
本教程旨在揭示一种巧妙的解决方案：通过组合使用:first-child、:last-child和:not()伪类，在仅允许一个选择器的情况下，实现对元素位置的精确定位。
示例HTML结构
为了更好地理解和演示选择器的工作原理，我们将使用以下HTML代码作为示例：
<h2>Task 6</h2>
<article id="task-6">
<div class="marble" data-target></div>
<section class="first">
<div class="marble" data-target></div>
<div class="marble"></div>
<div class="marble" data-target></div>
</section>
<div class="marble"></div>
<section class="last">
<div class="marble" data-target></div>
<div class="marble"></div>
<div class="marble" data-target></div>
</section>
<div class="marble" data-target></div>
</article>问题分析与限制回顾
原始问题目标是选择所有带有data-target属性的.marble类div元素。然而，这个任务被施加了极其严格的限制：
- 禁止使用: :nth-child, :nth-last-child, :nth-of-type, :nth-last-of-type。
- 禁止使用: [data-target]属性选择器。
- 禁止使用: +或~兄弟选择器。
- 关键要求: 只能使用一个CSS选择器。
这些限制使得传统的定位方法失效，迫使我们寻找替代方案。
用户曾尝试使用以下选择器： #task-6 section div:not(:not(:first-child):not(:last-child))
这个选择器的意图是选择#task-6下所有section元素内部，那些是其父元素（即section）的第一个或最后一个子元素的div。它的作用范围被明确限定在section内部。
核心选择器技巧解析
在严格的限制下，我们可以利用:not()伪类与:first-child和:last-child进行组合，以实现对不同位置子元素的精确选择。
1. 选择父元素的第一个或最后一个子元素
要选择一个父元素下的所有子元素中，是第一个或最后一个的元素，我们可以使用双重否定逻辑。
-
原理分析:
- div:not(:first-child):not(:last-child) 表示选择那些“不是第一个子元素”并且“不是最后一个子元素”的div。这实际上是选择了所有“中间”的div子元素。
- 现在，如果我们想选择“第一个或最后一个”子元素，我们只需要对上述表达式取反。
- 因此，div:not( :not(:first-child):not(:last-child) ) 的含义就是“不是中间子元素”的div，即“是第一个子元素”或者“是最后一个子元素”的div。
- 这个选择器在逻辑上等同于 div:first-child, div:last-child，但在只允许一个选择器时非常有用。
-
示例代码: 如果我们的目标是选中#task-6内部，所有是其父元素的第一个或最后一个子元素的div，我们可以这样写：
#task-6 div:not(:not(:first-child):not(:last-child)) { /* 样式应用于 #task-6 内部，所有是其父元素的第一个或最后一个子元素的 div */ border: 2px solid red; } -
效果分析: 应用此选择器，它会选中以下div元素：
- article下的第一个div.marble (<div class="marble" data-target></div>)
- article下的最后一个div.marble (<div class="marble" data-target></div>)
- section.first下的第一个div.marble (<div class="marble" data-target></div>)
- section.first下的最后一个div.marble (<div class="marble" data-target></div>)
- section.last下的第一个div.marble (<div class="marble" data-target></div>)
- section.last下的最后一个div.marble (<div class="marble" data-target></div>)
2. 选择父元素的“中间”子元素（非第一个也非最后一个）
如果我们的目标是选择那些既不是第一个也不是最后一个的子元素，这比前一个场景更直观。
-
原理分析:
- div:not(:first-child) 表示选择那些“不是第一个子元素”的div。
- div:not(:last-child) 表示选择那些“不是最后一个子元素”的div。
- 将两者结合，div:not(:first-child):not(:last-child) 就准确地表达了“不是第一个子元素”并且“不是最后一个子元素”的div。
-
示例代码: 如果我们的目标是选中#task-6内部，所有是其父元素的中间子元素的div，我们可以这样写：
#task-6 div:not(:first-child):not(:last-child) { /* 样式应用于 #task-6 内部，所有是其父元素的中间子元素的 div */ background-color: yellow; } -
效果分析: 应用此选择器，它会选中以下div元素：
- article下的第二个div.marble (<div class="marble"></div>)
- section.first下的第二个div.marble (<div class="marble"></div>)
- section.last下的第二个div.marble (<div class="marble"></div>)
总结与注意事项
灵活性与局限性: 这种基于:not()、:first-child和:last-child的组合技巧，在面对严格的选择器限制时显得非常强大和巧妙。它能够有效地实现对元素头部、尾部和中间位置的基本选择。然而，这种方法存在局限性，例如它无法像:nth-child(n)那样精确地选择第N个元素，也无法区分多个中间元素中的特定一个（除非结合其他属性）。
实际应用场景: 在日常的Web开发中，如果条件允许，我们强烈推荐优先使用:nth-child、:nth-of-type等语义更明确、功能更强大的伪类，它们提供了更精细的控制能力。对于需要根据特定数据进行筛选的元素，[data-*]属性选择器是更灵活、更具可维护性的解决方案。
理解逻辑: 掌握:not()选择器与基本位置伪类的组合逻辑，不仅能帮助您解决受限条件下的问题，还能加深对CSS选择器工作原理的理解，从而在面对各种复杂或特殊的需求时，能够提供创新的解决方案。
