如何隱藏通過CSS一級span元素 「 - >」 選擇

Question

這裏是我的HTML代碼

.wrapper.mini-menu .sidebar-nav li > span{ 
 
     display: none; 
 
    }

<div class="wrapper mini-menu"> 
 
    <div class="header"></div> 
 
    <div class="sidebar"> 
 
     <ul class="sidebar-nav"> 
 
      <li> 
 
       <a href="#"> 
 
        <i class="fa fa-home"></i> 
 
        <span>Hide Item1</span> 
 
        <i class="fa arrow pull-right"></i> 
 
       </a> 
 
       <ul class="sub-menu"> 
 
        <li> 
 
         <a href=""> 
 
          <i class="fa fa-user-plus"></i> 
 
          <span>Show Item 1</span> 
 
         </a> 
 
        </li> 
 
        <li> 
 
         <a href=""> 
 
          <i class="fa fa-user-plus"></i> 
 
          <span>Show Item 2</span> 
 
         </a> 
 
        </li> 
 
       </ul> 
 
      </li> 
 

 
      <li> 
 
       <a href="#item1"> 
 
        <i class="fa fa-dashboard"></i> 
 
        <span>Hide Item2</span> 
 
       </a> 
 
      </li> 
 
      <li> 
 
       <a href="#item1"> 
 
        <i class="fa fa-cogs"></i> 
 
        <span>Hide Item3</span> 
 
       </a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>

我想隱藏隱藏item1，隱藏item2和隱藏item3。但我不想隱藏show項目。如果我不使用>選擇器，它將隱藏所有的span元素。如何通過CSS >選擇器只選擇那些項目？

Answer 1

你目前的CSS選擇器的意思是：

隱藏所有span S中的的li是的.sidebar-nav後代子女。如果你只是想針對第一級li元素做到這一點，而不是：

.wrapper.mini-menu .sidebar-nav > li > a > span { 
    display: none; 
} 

Answer 2

看：

.wrapper.mini-menu .sidebar-nav > li > a{ 
 
     display: none; 
 
    }

<div class="wrapper mini-menu"> 
 
    <div class="header"></div> 
 
    <div class="sidebar"> 
 
     <ul class="sidebar-nav"> 
 
      <li> 
 
       <a href="#"> 
 
        <i class="fa fa-home"></i> 
 
        <span>Hide Item1</span> 
 
        <i class="fa arrow pull-right"></i> 
 
       </a> 
 
       <ul class="sub-menu"> 
 
        <li> 
 
         <a href=""> 
 
          <i class="fa fa-user-plus"></i> 
 
          <span>Show Item 1</span> 
 
         </a> 
 
        </li> 
 
        <li> 
 
         <a href=""> 
 
          <i class="fa fa-user-plus"></i> 
 
          <span>Show Item 2</span> 
 
         </a> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
     
 
      <li> 
 
       <a href="#item1"> 
 
        <i class="fa fa-dashboard"></i> 
 
        <span>Hide Item2</span> 
 
       </a> 
 
      </li> 
 
      <li> 
 
       <a href="#item1"> 
 
        <i class="fa fa-cogs"></i> 
 
        <span>Hide Item3</span> 
 
       </a> 
 
      </li> 
 
     </ul> 
 
    </div>

Answer 3

您選擇跨度.fa用戶加之後站立圖標與+選擇器，但不是很確定這是你尋找什麼？

@import url("//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"); 
 
span { 
 
    display:none; 
 
    } 
 
.fa.fa-user-plus + span{ 
 
     display: inline-block; 
 
    }

<div class="wrapper mini-menu"> 
 
    <div class="header"></div> 
 
    <div class="sidebar"> 
 
     <ul class="sidebar-nav"> 
 
      <li> 
 
       <a href="#"> 
 
        <i class="fa fa-home"></i> 
 
        <span>Hide Item1</span> 
 
        <i class="fa arrow pull-right"></i> 
 
       </a> 
 
       <ul class="sub-menu"> 
 
        <li> 
 
         <a href=""> 
 
          <i class="fa fa-user-plus"></i> 
 
          <span>Show Item 1</span> 
 
         </a> 
 
        </li> 
 
        <li> 
 
         <a href=""> 
 
          <i class="fa fa-user-plus"></i> 
 
          <span>Show Item 2</span> 
 
         </a> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
     
 
      <li> 
 
       <a href="#item1"> 
 
        <i class="fa fa-dashboard"></i> 
 
        <span>Hide Item2</span> 
 
       </a> 
 
      </li> 
 
      <li> 
 
       <a href="#item1"> 
 
        <i class="fa fa-cogs"></i> 
 
        <span>Hide Item3</span> 
 
       </a> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</div>