Wie erste Ebene span-Element durch CSS verstecken ">" Selektor

Question

Hier ist mein HTML-Code

.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>

ich mich verstecken möchte item1 verstecken, verstecken item2 und item3 verstecken. Aber ich möchte nicht show Elemente verstecken. Wenn ich > Selektor nicht verwende, verbirgt es alle Span Elemente. Wie wähle ich nur diese Artikel von CSS > Selektor?

Answer 1

Was Ihre aktuelle CSS-Selektor sagt, ist:

ausblenden alle span s, die Kinder von li sind die Nachkommen von .sidebar-nav sind. Wenn Sie nur die erste Ebene li Elemente ausrichten möchten dies tun, statt:

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

Answer 2

Look:

.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

Sie wählen eine Spanne stehen direkt nach dem .FA-User-plus Symbol mit dem + Selektor, aber nicht so sicher, wonach Sie suchen?

@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>