Question

我有以下html

.resources .resource:first-child {
  border-top: 1px solid #D9B310;
}

.resources .resource {
  border-bottom: 1px solid #D9B310;
  padding: 10px 0;
}

<div class="resources">
  <h2 class="text-center">Ресурси</h1>

    <div class="resource">
      <h4>Минерали <span class="resource-quantity">3700</span></h3>
    </div>

    <div class="resource">
      <h4>Газ <span class="resource-quantity">500</span></h3>
    </div>
</div>

没有第一个孩子的选择器工作正常。但是，在我的情况下，它不是第一个孩子选择器。有人可以告诉我为什么吗？

Answer 1

因为您想要样式化的.image-thumbnail:hover { background-image: <path to image>; background-repeat: no-repeat; }元素是其父级的第二个子元素，所以第一个子元素是.resource标记（小心，标题标记未正确关闭。

h1与:first-child有误。

:first-of-type仅选择其父容器中第一个子元素的:first-child元素。
.resource选择:first-of-type元素作为其父容器中与给定选择器（.resource）匹配的第一个元素，但不一定在第一个孩子的位置。

您可以使用.resource或:nth-child(2)，因为在您的情况下，该元素是第二个孩子。

＆＃13;
＆＃13;
:first-of-type
＆＃13;
.resources .resource:nth-child(2){ border-top: 1px solid #D9B310; } .resources .resource { border-bottom: 1px solid #D9B310; padding: 10px 0; }
＆＃13;
＆＃13;
＆＃13;

Answer 2

使用:first-of-type因为它是其父母的第二个孩子。

＆＃13;

.resources .resource:first-of-type {
  border-top: 1px solid #D9B310;
}

.resources .resource {
  border-bottom: 1px solid #D9B310;
  padding: 10px 0;
}

＆＃13;

<div class="resources">
  <h2 class="text-center">Ресурси</h2>

    <div class="resource">
      <h4>Минерали <span class="resource-quantity">3700</span></h4>
    </div>

    <div class="resource">
      <h4>Газ <span class="resource-quantity">500</span></h4>
    </div>
</div>

＆＃13;

Answer 3

＆＃13;

.resources .resource:first-of-type {
  border-top: 1px solid #D9B310;
}

.resources .resource {
  border-bottom: 1px solid #D9B310;
  padding: 10px 0;
}

＆＃13;

<div class="resources">
  <h2 class="text-center">Ресурси</h2>

    <div class="resource">
      <h4>Минерали <span class="resource-quantity">3700</span></h4>
    </div>

    <div class="resource">
      <h4>Газ <span class="resource-quantity">500</span></h4>
    </div>
</div>

＆＃13;

css第一个孩子没有唠叨

3 个答案: