Мне любопытно, почему «первый в своем роде» не работает

Question

Я ожидаю, что только у зеленого div есть отступы.но похоже, что у каждого div есть отступы.
Мне любопытно, почему «first-of-type» не работает.и мне нужно решение.пожалуйста, дайте мне любой совет, спасибо

.test {background-color:red; border:1px solid #000; width:500px;height:500px;}
.test div {background-color:green;width:300px;height:300px; border:1px solid #000;}
.test div div {background-color:pink;width:300px;height:250px; border:1px solid #000;}
.test div div div {background-color:yellow;width:300px;height:200px; border:1px solid #000;}
.test div:first-of-type {padding:30px;}

<div class="test">
  <div>
    <div>
      <div>
      </div>
    </div>
  </div>
</div>

Answer 1

Потому что .test div является селектором потомка и, таким образом, нацеливается на любого <div> потомка .test, а не только direct потомки.Это также включает внуков и правнуков.

В вашем примере все ваших дочерних элементов будут зелеными, хотя это не сразу очевидно из-за того, что вы переопределяете этоправило с повышенной специфичностью :

В дополнение к этому, :first-of-type предназначается для первого элемента этого типа в его контейнере.Каждый <div> заключен в другой <div>, и, поскольку у каждого из них нет братьев и сестер, он автоматически становится first child.Вот почему каждый из ваших дочерних элементов соответствует не только критерию .test div, но и критерию .test div:first-of-type.

Если вы хотите, чтобы только прямой потомок (зеленый <div>) имел отступы, выследует использовать прямой дочерний комбинатор (>) как .test > div:first-of-type:

.test {
  background-color: red;
  border: 1px solid #000;
  width: 500px;
  height: 500px;
}

.test div {
  background-color: green;
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}

.test div div {
  background-color: pink;
  width: 300px;
  height: 250px;
  border: 1px solid #000;
}

.test div div div {
  background-color: yellow;
  width: 300px;
  height: 200px;
  border: 1px solid #000;
}

.test > div:first-of-type {
  padding: 30px;
}

<div class="test">
  <div>
    <div>
      <div>
      </div>
    </div>
  </div>
</div>

Answer 2

Пробел между селекторами указывает, что первым является предком второго.Вместо этого используйте дочерний селектор с >:

.test {background-color:red; border:1px solid #000; width:500px;height:500px;}
.test > div {background-color:green;width:300px;height:300px; border:1px solid #000;}
.test > div > div {background-color:pink;width:300px;height:250px; border:1px solid #000;}
.test > div > div > div {background-color:yellow;width:300px;height:200px; border:1px solid #000;}
.test > div:first-of-type {padding:30px;}

<div class="test">
  <div>
    <div>
      <div>
      </div>
    </div>
  </div>
</div>

(обратите внимание, что поскольку у .test есть только один дочерний элемент, first-of-type не имеет никакого значения для этого HTML - один дочерний элемент будет выбраннезависимо от .test > div)