html - 在这种情况下如何选择第一个 child ？

Question

我想选择 p:first-child，但在本例中如您所见

.root p:first-child {
  background-color: green;
}

选择根中的所有 p 标签而不是第一个子标签:id="this"

在这种情况下如何使用 .root p:first-child 仅选择 id="this"还是应该使用 id？

代码: https://codepen.io/qkreltms/pen/LYPLwPB

.root p:first-child {
  background-color: green;
}

p {
  margin: 0;
}

.container {
  display: inline-box
}

.root {
  display: flex;
}

div {
  display: block;
  background-color: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

<div class="root" id="this">
  <div class="container">
    <p>test</p>
  </div>
  <div class="container">
    <p>test2</p>
  </div>
    <div class="container">
    <p>test3</p>
  </div>
</div>

Answer 1

first-child选择器选择并设置作为其父元素的第一个子元素的每个元素的样式。所以这里的样式被应用到所有 <p>标签，因为只有一个 <p>在其各自的父级内标记 .container

而不是选择 p的第一个 child ，选择 first-child类(class) .container以获得所需的结果。

.root .container:first-child p{
  background-color: green;
}

p {
  margin: 0;
}

.container {
  display: inline-box
}

.root {
  display: flex;
}

div {
  display: block;
  background-color: pink;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

<div class="root">
  <div class="container">
    <p>test</p>
  </div>
  <div class="container">
    <p>test2</p>
  </div>
    <div class="container">
    <p>test3</p>
  </div>
</div>