我很好奇为什么“第一类型”不起作用

Question

  

我希望只有绿色的div有填充。但看起来每个div都有填充。
  我很好奇为什么“第一类型”不起作用。   我需要解决方案。   请给我任何建议，谢谢

.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

选择器indicates that之间的空格是第一个选择器{em> 的第二个。改为使用child selector和>：

.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都会选择一个孩子）

Answer 2

由于package a.b.c public class D { public D(a.b.d.B b, a.b.e.C c) { // ... call ((A)b).X() or ((A)c).X() } } 是descendant selector，因此不仅针对 direct .test div的任何 <div>个子孙>后代。它还包括孙辈和曾孙辈。

在您的示例中，所有后裔元素的所有将是绿色的，尽管由于您用增加的specificity覆盖了此规则，所以这并不是立即显而易见的：

除此之外，:first-of-type在其容器中定位该类型的第一个元素。每个.test都包裹在另一个<div>中，并且由于每个都没有兄弟姐妹，因此它自动成为 first 子级。因此，您的每个子元素不仅符合<div>标准，而且还符合.test div标准。

如果只希望直接后代（绿色.test div:first-of-type）具有填充，则应将direct child combinator（<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;
}