Question

文件夹aaa bbb ccc和ddd是此html结构中的主要目录。我如何仅对主目录禁用（显示；不显示）超棒的字体图标？对于主目录，该图标不应出现 PS：我不能更改类名，因为它是为所有li标签动态生成的！这是我的html：

<ul>
    <li class="treeview"><i class="fas fa-level-up-alt"></i>aaa</li>
    <li class="treeview"><i class="fas fa-level-up-alt"></i>bbb</li>
    <li class="treeview"><i class="fas fa-level-up-alt"></i>ccc
       <ul>
           <li class="treeview"><i class="fas fa-level-up-alt"></i>subccc</li>
       </ul>
    </li>
    <li class="treeview"><i class="fas fa-level-up-alt"></i>ddd
       <ul>
           <li class="treeview"><i class="fas fa-level-up-alt"></i>subddd</li>
       </ul>
    </li>
</ul>

Answer 1

您可以考虑使用两个选择器来实现此目的：

/*Hide all of them*/
ul li.treeview i {
  display: none;
}


/*Show the nested ones*/
ul ul li.treeview i {
  display: inline-block;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<ul>
  <li class="treeview"><i class="fas fa-level-up-alt"></i>aaa</li>
  <li class="treeview"><i class="fas fa-level-up-alt"></i>bbb</li>
  <li class="treeview"><i class="fas fa-level-up-alt"></i>ccc
    <ul>
      <li class="treeview"><i class="fas fa-level-up-alt"></i>subccc</li>
    </ul>
  </li>
  <li class="treeview"><i class="fas fa-level-up-alt"></i>ddd
    <ul>
      <li class="treeview"><i class="fas fa-level-up-alt"></i>subddd</li>
    </ul>
  </li>
</ul>

或使用一个选择器，但更改html时应注意：

:not(.treeview) > ul > li.treeview > i {
  display: none;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<ul>
  <li class="treeview"><i class="fas fa-level-up-alt"></i>aaa</li>
  <li class="treeview"><i class="fas fa-level-up-alt"></i>bbb</li>
  <li class="treeview"><i class="fas fa-level-up-alt"></i>ccc
    <ul>
      <li class="treeview"><i class="fas fa-level-up-alt"></i>subccc</li>
    </ul>
  </li>
  <li class="treeview"><i class="fas fa-level-up-alt"></i>ddd
    <ul>
      <li class="treeview"><i class="fas fa-level-up-alt"></i>subddd</li>
    </ul>
  </li>
</ul>

Answer 2

我建议做的是利用 child combinator (>) 在顶层（display: none）图标上设置ul > li > .fas，然后再使用的 CSS specificity ，还可以为层次结构中较低的元素添加更具体的选择器。

尽管两个选择器实际上都将针对子图标，但是由于应用了更具体的选择器，该选择器将图标再次设置为可见，因此这些元素将显示出来。

这可以在下面看到：

ul > li > .fas {
  display: none;
}

ul li > ul .fas {
  display: inline-block;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet"/>

<ul>
  <li class="treeview"><i class="fas fa-level-up-alt"></i>aaa</li>
  <li class="treeview"><i class="fas fa-level-up-alt"></i>bbb</li>
  <li class="treeview"><i class="fas fa-level-up-alt"></i>ccc
    <ul>
      <li class="treeview"><i class="fas fa-level-up-alt"></i>subccc</li>
    </ul>
  </li>
  <li class="treeview"><i class="fas fa-level-up-alt"></i>ddd
    <ul>
      <li class="treeview"><i class="fas fa-level-up-alt"></i>subddd</li>
    </ul>
  </li>
</ul>

Answer 3

这应该可以解决问题：}

ul:first-child > li {
display:none;
}

希望有帮助！

如何在第一个孩子的li标签中获取真棒字体图标

3 个答案: