本文旨在探讨在严格CSS选择器限制下，如何精准定位HTML元素，特别是当`:nth-child`系列伪类、属性选择器`[data-target]`以及兄弟选择器`+`和`~`均被禁用时。文章将通过一个具体的案例，详细解析如何巧妙地结合`:first-child`、`:last-child`和`:not()`伪类，实现对特定位置元素的选取，即便目标元素通常需要通过被禁用的属性选择器来识别。
挑战：在严格约束下定位元素
在Web开发中，我们通常会利用丰富的CSS选择器来精确地定位和样式化元素。然而，在某些特定场景，例如编码竞赛或需要极致优化、避免特定选择器的项目中，我们可能会面临极其严格的限制。本教程将围绕以下HTML结构，展示如何在不使用:nth-child、:nth-last-child、:nth-of-type、:nth-last-of-type、[data-target]以及兄弟选择器+和~的情况下，仅用一个选择器来选中所有带有data-target属性的.marble类div元素。
<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>目标是选中所有class="marble"且带有data-target属性的div，但如前所述，[data-target]选择器是被禁止的。这意味着我们必须寻找一种间接的方法来识别这些元素。
分析目标元素的共同特征
由于无法直接通过data-target属性来选择，我们需要仔细观察所有目标元素在HTML结构中的位置特征。让我们逐一审视它们：
立即学习“前端免费学习笔记（深入）”；
- 第一个 <div class="marble" data-target></div>：它是#task-6的第一个子元素，即 :first-child。
- section.first内部的第一个 <div class="marble" data-target></div>：它是section.first的第一个div子元素，也是第一个子元素，即 :first-child。
- section.first内部的第三个 <div class="marble" data-target></div>：它是section.first的最后一个div子元素，也是最后一个子元素，即 :last-child。
- section.last内部的第一个 <div class="marble" data-target></div>：它是section.last的第一个div子元素，也是第一个子元素，即 :first-child。
- section.last内部的第三个 <div class="marble" data-target></div>：它是section.last的最后一个div子元素，也是最后一个子元素，即 :last-child。
- 最后一个 <div class="marble" data-target></div>：它是#task-6的最后一个子元素，即 :last-child。
通过观察，我们发现所有目标div元素都共享一个关键的共同特征：它们在其各自的父元素中，要么是第一个子元素（:first-child），要么是最后一个子元素（:last-child）。这个发现是解决问题的关键。
核心策略：利用:not()、:first-child和:last-child
我们的目标是选择那些是:first-child或者:last-child的div元素。在不允许使用[data-target]和nth-*伪类的情况下，我们可以巧妙地组合:not()、:first-child和:last-child来实现这一逻辑。
考虑以下逻辑：
- 选择非第一个子元素：div:not(:first-child)
- 选择非最后一个子元素：div:not(:last-child)
- 选择既非第一个也非最后一个子元素（即“中间”子元素）：div:not(:first-child):not(:last-child) 这个选择器会选中所有既不是其父元素的第一个子元素，也不是最后一个子元素的div。
现在，我们想要的是第一个子元素或最后一个子元素。这正好与“既非第一个也非最后一个子元素”的逻辑相反。因此，我们可以对第三步的结果取反：
div:not( div:not(:first-child):not(:last-child) )
这个复杂的选择器可以分解为：
- div:not(:first-child):not(:last-child)：选择所有“中间”的div子元素。
- 外层的:not(...)：否定前述选择，即选择非中间的div子元素。
- “非中间”的div子元素，就意味着它们是第一个或最后一个div子元素。
构建最终选择器
结合上述核心策略和HTML结构，我们需要确保选择器作用于#task-6内部的所有div元素。最初的尝试可能包含section，如#task-6 section div:not(:not(:first-child):not(:last-child))。然而，这将把选择范围限制在section元素内的div，而忽略了直接位于#task-6下的第一个和最后一个div。
因此，移除section的限制，使选择器能作用于#task-6的所有div后代，是至关重要的一步。
最终的单一选择器如下：
#task-6 div:not(:not(:first-child):not(:last-child)) {
/* 在这里应用你的样式 */
background-color: gold; /* 示例样式 */
border: 2px solid red;
}将此CSS应用到提供的HTML上，所有带有data-target属性的div.marble元素都将被选中并应用样式。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Selector Challenge</title>
<style>
body { 
