html - CSS - 选择器 nth-child

Question

为什么所有的元素都是红色的？

<div class="parent">
  <span>1</span>
  <p>2</p>
  <h1>3</h1>
</div>

.parent:nth-child(1) {
  color: red;
}

.parent:nth-child(2) {
  color: green;
}

.parent:nth-child(3) {
  color: blue;
}

我认为这些元素会被适本地着色。 span, p, h1 是元素 div?

的子元素

Answer 1

.parent:nth-child(1) 表示“一个元素是其父元素和的第一个子元素，它是父元素类"。

它不会匹配 span、p 或 h1，因为它们没有 class="parent".

具有该类并且 是其父级中的第一个子级。

你需要一个 child 或后代combinator在那里:

.parent > :nth-child(1)
.parent :nth-child(1)