0

我正在学习父元素和子元素，并且试图弄清楚如何选择/设置嵌套在 3 个 div 中的孙元素的样式，而无需添加额外的类、ID 或 !important 来解决它。父 div 有一个“孙子”类，并且有两个其他 div 共享同一个类。我只需要设置“Aaron”的样式，而不选择与同一类“孙子”关联的其他 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 -->

我已经尝试了几个小时，但无法解决如何做到这一点。

4

3 回答 3

0

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

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

通过维护上述结构，并使用 CSS 伪类: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
}

  1. body锚定第一个参考，除了它是什么之外，它不能被推断为任何东西。只要选择器的每个段都从其父段建立可靠的引用，任何歧义就不太可能将所有内容搞砸。唯一的孩子 body就div.parent足够了> div。

  2. >直接后代（或子）组合器将可能性缩小到两个div.child。

  3. :first-of-type伪类将可能性缩小到只有第一个div.child。此外，如果first-child要使用，则将<p>改为目标。

  4. 另一个> div:first-of-type将我们带到第一个 div.grandchild

  5. > p缩小到<p>Aaron</p>。

  6. 请注意，子组合>器起着非常重要的作用。如果我们在最后阶段忽略了它，div:first-of-type p 就会抓住所有后代<p>——这意味着 <p>Victoria</p>也<p>Devin</p>将是绿色的。

  7. 要记住的另一件事是，即使是最简洁的选择器（例如我提供的选择器）也可能会将其样式传递给其后代。如果您的 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 -->

于 2020-04-28T20:20:25.463 回答
0

它有点脆弱，但是...

.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 等）。

于 2020-04-28T18:39:01.480 回答
0

只需使用为我工作的 CSS 伪类

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

W3 学校 CSS 伪类

于 2020-04-28T18:40:44.457 回答