CSS Select 未添加新 HTML、ID 或 !important 的孙元素

Question

我正在学习父元素和子元素，我正在尝试弄清楚如何 select/style 嵌套在 3 div 中的孙元素而不添加额外的 class es、ID 或 !important 来解决它。父 div 的 class 为 "grandchild"，另外两个 div 共享相同的 class。我只需要设置样式 "Aaron" 而无需选择与相同 class "grandchild".

关联的其他 p 标签

<div class="parent">
  <!-- red -->
  <p>Jane</p>

  <div class="child">
    <!-- blue -->
    <p>Jim</p>

    <div class="grandchild">
      <!-- green -->
      <p>Aaron</p> <!--------------------Style ONLY this one----->

      <div class="greatgrandchild"> 
        <!-- pink -->
        <p>Victoria</p>
      </div>

      <div class="greatgrandchild greatgrandchild2">
        <!-- purple -->
        <p>Devin</p>
      </div>
      <!-- grandchild2 -->
    </div>
    <!-- grandchild -->
  </div>
  <!-- child -->

  <div class="child child2">
    <!-- coral -->
    <p>Susan</p>

    <div class="grandchild">
      <!-- aqua -->
      <p>George</p>

      <div class="greatgrandchild">
        <!-- rosybrown -->
        <p>Julie</p>
      </div>
    </div>

    <div class="grandchild grandchild2">
      <!-- sienna -->
      <p>Nancy</p>

      <div class="greatgrandchild">
        <!-- tomato -->
        <p>Bob</p>
      </div>
    </div>
    <!-- grandchild -->
  </div>
</div>
<!-- parent -->

我查看了 Stack Overflow 上的其他答案，但找不到我的情况。下面显示了在 CSS.

中尝试和解决它的路线

/*styles Aaron & George*/
.parent > .child > div:first-of-type > p:nth-child(1) {
  color: green;
}

/*Styles Aaron & George*/
div[class="grandchild"] > p {
  color:green;
}

<div class="parent">
  <!-- red -->
  <p>Jane</p>

  <div class="child">
    <!-- blue -->
    <p>Jim</p>

    <div class="grandchild">
      <!-- green -->
      <p>Aaron</p> <!--------------------Style ONLY this one----->

      <div class="greatgrandchild"> 
        <!-- pink -->
        <p>Victoria</p>
      </div>

      <div class="greatgrandchild greatgrandchild2">
        <!-- purple -->
        <p>Devin</p>
      </div>
      <!-- grandchild2 -->
    </div>
    <!-- grandchild -->
  </div>
  <!-- child -->

  <div class="child child2">
    <!-- coral -->
    <p>Susan</p>

    <div class="grandchild">
      <!-- aqua -->
      <p>George</p>

      <div class="greatgrandchild">
        <!-- rosybrown -->
        <p>Julie</p>
      </div>
    </div>

    <div class="grandchild grandchild2">
      <!-- sienna -->
      <p>Nancy</p>

      <div class="greatgrandchild">
        <!-- tomato -->
        <p>Bob</p>
      </div>
    </div>
    <!-- grandchild -->
  </div>
</div>
<!-- parent -->

我已经在这方面尝试了几个小时，但我不知道该怎么做。

Answer 1

它有点脆弱，但是...

.parent .child:not(.child2) > .grandchild > p {
  border: 2px solid green
}

<div class="parent">
  <!-- red -->
  <p>Jane</p>

  <div class="child">
    <!-- blue -->
    <p>Jim</p>

    <div class="grandchild">
      <!-- green -->
      <p>Aaron</p>
      <!--------------------Style ONLY this one----->

      <div class="greatgrandchild">
        <!-- pink -->
        <p>Victoria</p>
      </div>

      <div class="greatgrandchild greatgrandchild2">
        <!-- purple -->
        <p>Devin</p>
      </div>
      <!-- grandchild2 -->
    </div>
    <!-- grandchild -->
  </div>
  <!-- child -->

  <div class="child child2">
    <!-- coral -->
    <p>Susan</p>

    <div class="grandchild">
      <!-- aqua -->
      <p>George</p>

      <div class="greatgrandchild">
        <!-- rosybrown -->
        <p>Julie</p>
      </div>
    </div>

    <div class="grandchild grandchild2">
      <!-- sienna -->
      <p>Nancy</p>

      <div class="greatgrandchild">
        <!-- tomato -->
        <p>Bob</p>
      </div>
    </div>
    <!-- grandchild -->
  </div>
</div>
<!-- parent -->

如果可能，我建议添加一些更强大的标记（属性、ID 等）。

Answer 2

就用CSS伪类为我工作

.child:first-of-type .grandchild > p {
    color: green;
}

W3 School CSS Pseudo-classes

Answer 3

首先要解释的是，我的解决方案不使用对属性（例如 id、class、名称等）的引用，仅使用 tagName 和 :nth-of-type 伪 classes 和子组合器 >。之所以如此，是因为问题的性质。如果结构和 classes 以最小的方式分配，那么一开始可能甚至不会有问题。这就是为什么我避免对每个块级元素使用 <div> 的原因。我为每个级别使用交替标签：

<body>          root
  <main>        1st
    <section>   2nd
      <article> 3rd
        <aside> 4th </aside>
      </article>
    </section>
  </main>
</body>

通过保持上面的结构，并使用 CSS 伪 class :nth-of-type，我们可以准确地引用级别。 :nth-of-type 像它的堂兄 nth-child 一样引用父子层次结构，但它优于 nth-child 的是它也引用标签的类型。尽管在相同的标签上使用 nth-of-type 可能看起来多余，但如果我们引用 <body> 我们仍然可以获得准确的结果，因为它是唯一的，几乎是每个标签的祖先，并且没有兄弟标签。

body > div > div:first-of-type > div:first-of-type > p {
 color: green
}

body锚定第一个不能推断为什么都不是。只要每段选择器从它的父级建立可靠的引用，少了一个任何含糊不清的事情都有可能搞砸。独生子 body 有 div.parent 所以 > div 就足够了。
> 直接后代（或子代）组合器缩小范围两个 div.child.
的可能性
:first-of-type伪class将可能性缩小到只有第一个div.child。此外，如果要使用 first-child，那么  将成为目标。
另一个 > div:first-of-type 将我们带到第一个 div.grandchild
> p 缩小为 Aaron.
请注意，子组合器 > 起着非常重要的作用。如果我们在最后阶段忽略了它，div:first-of-type p 会抓住所有后代 ——这意味着 Victoria 和 Devin 也会是绿色的。
还有一点要记住，即使是最简洁的选择器（例如我提供的那个）可能仍然流血于它的风格传给它的后代。如果您的 CSS 表现出特定的行为，这很可能是由于继承。那只能是不幸的是，根据具体情况进行处理。

演示

body > div > div:first-of-type > div:first-of-type > p {
 color: green
}

<div class="parent">
  <!-- red -->
  <p>Jane</p>

  <div class="child">
    <!-- blue -->
    <p>Jim</p>

    <div class="grandchild">
      <!-- green -->
      <p>Aaron</p>
      <!--------------------Style ONLY this one----->

      <div class="greatgrandchild">
        <!-- pink -->
        <p>Victoria</p>
      </div>

      <div class="greatgrandchild greatgrandchild2">
        <!-- purple -->
        <p>Devin</p>
      </div>
      <!-- grandchild2 -->
    </div>
    <!-- grandchild -->
  </div>
  <!-- child -->

  <div class="child child2">
    <!-- coral -->
    <p>Susan</p>

    <div class="grandchild">
      <!-- aqua -->
      <p>George</p>

      <div class="greatgrandchild">
        <!-- rosybrown -->
        <p>Julie</p>
      </div>
    </div>

    <div class="grandchild grandchild2">
      <!-- sienna -->
      <p>Nancy</p>

      <div class="greatgrandchild">
        <!-- tomato -->
        <p>Bob</p>
      </div>
    </div>
    <!-- grandchild -->
  </div>
</div>
<!-- parent -->

CSS Select 未添加新 HTML、ID 或 !important 的孙元素

CSS Select Grandchild Element without adding new HTML, IDs, or !important

html

css

css-selectors

grandchild

演示