如何通过CSS“＆gt;”隐藏第一级跨度元素选择

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后代的li个孩子的所有.sidebar-nav。如果您只想定位第一级li元素，请执行以下操作：

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

Answer 2

查找

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您使用 + 选择器在.fa-user-plus图标后面选择一个范围，但不确定这是您要查找的内容吗？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;