Question

假设我在父子关系中具有3个级别的HTML标签元素。 A是祖父母。在里面有一个标签（父），在里面有一个

标签（子）。现在通过使用CSS我想改变那个

（child）的设计（祖父母）标签中的标记，使用来自（祖父母）id或类名的CSS选择器。

需要有关此CSS技巧的帮助

<div>
   Hi I am grandparent.
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
</div>

我希望结果如下：将

标记的背景色设置为仅对第4个父级而言为任何颜色。请注意，控件应来自祖父母。这是因为我祖父母中有一个* ngfor，我想使用nth-child（n）概念为此编写CSS。

Answer 1

尽管您的h2标签不应包含p标签，但这应该可以解决问题：

div h2:nth-of-type(4) {
  background-color: tomato;
}

    div h2:nth-of-type(4) {
      background-color: tomato;
    }

<div>
   Hi I am grandparent.
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
     <h2>
        Hi I am parent.
          <p> Hi I am child. </p>
     </h2>
</div>

Answer 2

您可以使用CSS的：nth-child（）属性！尝试下面给出的代码。我还附加了适用于CodePen的链接。要了解它是如何工作的，您可以尝试一下！

访问笔以获得更多了解和实时演示：https://codepen.io/CUManiar/pen/vqGdze

.grand-parent {
  color: blue;
}

.grand-parent h2:nth-child(4) {
  color: red;
}

.grand-parent .parent p:nth-child(2) {
  color: pink
}

<div class="grand-parent">
   Hi I am grandparent.
     <h2 class="parent">
        Hi I am parent.
          <p class="child"> Hi I am grand child. </p>
          <p class="child"> Hi I am 2nd grand child. </p>
     </h2>
     <h2 class="parent">
        Hi I am parent.
          <p class="child"> Hi I am 2nd child. </p>
     </h2>
     <h2 class="parent">
        Hi I am parent.
          <p class="child"> Hi I am 3rd child. </p>
     </h2>
     <h2 class="parent">
        Hi I am parent.
          <p class="child"> Hi I am 4th child. </p>
     </h2>
     <h2 class="parent">
        Hi I am parent.
          <p class="child"> Hi I am 5th child. </p>
     </h2>
</div>

CSS使用选择器从父元素样式化子元素

2 个答案: