Как получить значок шрифта-удивительный в теге li, который является первым ребенком

Question

Папки aaa bbb ccc и ddd являются основными каталогами в этой html-структуре. Как я могу отключить (отобразить; нет) иконку font-awesome только для основных каталогов? Для основных каталогов значок не должен появляться 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

Это должно сработать:}

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

Надеюсь, это помогло!

Answer 2

Я бы порекомендовал использовать дочерний комбинатор (>) для установки display: none на значках верхнего уровня (ul > li > .fas), а затемтакже используется специфичность CSS для дополнительного добавления более специфичного селектора для элементов, расположенных ниже по иерархии.

Хотя оба селектора на самом деле нацеленыдочерние значки, поскольку есть более специфический селектор, который снова устанавливает значки как видимые, эти элементы будут отображаться.

Это можно увидеть в следующем:

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

Вы можете рассмотреть 2 селектора, чтобы достигнуть этого:

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