【问题标题】：Why isn't first-child working in this CSS documnet [duplicate]为什么第一个孩子不在这个 CSS 文档中工作 [重复]
【发布时间】：2018-01-09 06:02:50
【问题描述】：

我想知道为什么下面的 CSS 小提琴不只是关闭第一个孩子的向上箭头而不是任何其他 DIV。

<div id="activeitemslist" class="">
  <div class="ind_item">
      <div class="ind_updn">
          <span class="fa fa-arrow-up"></span>
          <span class="fa fa-arrow-down"></span>
      </div>
  </div>
  <div class="ind_item">
      <div class="ind_updn">
          <span class="fa fa-arrow-up"></span>
          <span class="fa fa-arrow-down"></span>
      </div>
  </div>
 </div>

CSS

#activeitemslist{width:100%;border:1px solid red}

#activeitemslist DIV:first-child SPAN.fa-arrow-up {display:none !important }

.ind_item > DIV{display: inline-block;text-align: center;vertical-align: middle}

https://jsfiddle.net/vvc0a4gx/

【问题讨论】：

您的代码似乎运行良好...我想您应该有一个问题...
因为#activeitems DIV:first-child 匹配#activeitems 内所有级别的div。将 DIV 更改为 .ind_item 或使用 #activeitems > DIV:first-child

标签： html css css-selectors

【解决方案1】：

嗨。

问题出在哪里？

让我们尝试解释一下 CSS 规则的基本部分：#activeitemslist DIV:first-child。它寻找一个 div，它是其父级的第一个子级，并且父级必须在 id="activeitemslist" 的元素内。

据此，两个向上箭头都符合您的规则#activeitemslist DIV:first-child SPAN.fa-arrow-up {display:none !important }，因此两者都不会显示。

解决方案

仅引用 id="activeitemslist" 元素的第一个子 div，CSS 规则应类似于 #activeitemslist > div:first-child。

所以要在示例小提琴中不显示第一个向上箭头，请遵循 CSS 规则（无需使用 !important）：

#activeitemslist > div:first-child span.fa-arrow-up {
    display: none;
}

Updated code fiddle from the question with the solution.

来源

您可以阅读更多关于 CSS3 选择器的信息，例如W3Schools page.

干杯

【讨论】：

【解决方案2】：

我在这里更改了 CSS

                #activeitemslist .ind_item:first-child SPAN.fa-arrow-up {display:none !important }

【讨论】：