为什么不是第一个孩子在这个CSS documnet中工作

Question

我想知道为什么下面的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/

Answer 1

您好。

问题出在哪里？

让我们尝试解释一下CSS规则的基本部分：#activeitemslist DIV:first-child。 它查找一个div，它是他父母的第一个孩子，父母必须在id =＆＃34; activeitemslist＆＃34;的元素内。

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

解决方案

仅引用具有id =＆＃34; activeitemslist＆＃34;的元素的第一个子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

干杯

Answer 2

我在这里更改了CSS

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