CSS选择孙元素-不添加新的HTML / ID's或！important

问题描述 投票：0回答：3

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

我已经尝试了几个小时，但无法绕开我的脑袋。

html css css-selectors grandchild
3个回答
0
投票
只需使用CSS伪类为我工作

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

W3 School CSS Pseudo-classes
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等）。
0
投票
首先要说明的是，我的解决方案仅使用tagName和:nth-of-type伪类以及子组合器>，而不使用对属性（例如ID，类，名称等）的引用。原因是由于问题的性质。如果以最小的方式分配结构和类，那么一开始甚至可能根本就没有问题。这就是为什么我避免对每个块级元素使用<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 -->
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.