Пули только в первом списке, не вложенные

Question

У меня есть этот список с желтыми пулями в списке. Но хотите, чтобы они были удалены, если есть вложенный ul. Есть ли способ сделать это только CSS?

   
ul.list-bullets--yellow {
    position: relative;
    list-style: none;
    margin-left: 1.25rem;
    padding-left: 1.75rem;
}
ul.list-bullets--yellow li:before {
    content: "\25CF";
    position: absolute;
    left: 0;
    color: #F2A900;
}

<ul class="list-bullets--yellow">
 <li>Lifecycle Automation – employees, contractors, business partners, RPA/bots</li>
 <li>Identity Governance controls: </li>

 // this ul li are the ones that I only want the default html bullet. not the yellow
   <ul>
    <li>Role-based access control (RBAC) model</li>
    <li>Policy model–suitability and separation of duties (SOD)</li>
   </ul>


 <li>Account and Password Management</li>
</ul>

Answer 1

это можно сделать, переключив ul.list-bullets--yellow li:before на ul.list-bullets--yellow > li:before

Это CSS «выбор ребенка», вы можете прочитать больше о них в w3schools . По существу, добавленное > говорит только в том случае, если li:before является прямым потомком ul.list-bullets--yellow

   
ul.list-bullets--yellow {
    position: relative;
    list-style: none;
    margin-left: 1.25rem;
    padding-left: 1.75rem;
}
ul.list-bullets--yellow > li:before {
    content: "\25CF";
    position: absolute;
    left: 0;
    color: #F2A900;
}

<ul class="list-bullets--yellow">
 <li>Lifecycle Automation – employees, contractors, business partners, RPA/bots</li>
 <li>Identity Governance controls: </li>

 // this ul li are the ones that I only want the default html bullet. not the yellow
   <ul>
    <li>Role-based access control (RBAC) model</li>
    <li>Policy model–suitability and separation of duties (SOD)</li>
   </ul>


 <li>Account and Password Management</li>
</ul>

Answer 2

Ваш CSS нацелен на все теги li ниже тега ul.list-bullets--yellow. вам необходимо использовать селекторный комбинатор дочерних элементов >

См. https://css-tricks.com/child-and-sibling-selectors/ для получения дополнительной информации

   
ul.list-bullets--yellow {
    position: relative;
    list-style: none;
    margin-left: 1.25rem;
    padding-left: 1.75rem;
}
ul.list-bullets--yellow > li:before {
    content: "\25CF";
    position: absolute;
    left: 0;
    color: #F2A900;
}

<ul class="list-bullets--yellow">
 <li>Lifecycle Automation – employees, contractors, business partners, RPA/bots</li>
 <li>Identity Governance controls: </li>

 // this ul li are the ones that I only want the default html bullet. not the yellow
   <ul>
    <li>Role-based access control (RBAC) model</li>
    <li>Policy model–suitability and separation of duties (SOD)</li>
   </ul>


 <li>Account and Password Management</li>
</ul>

Answer 3

Прежде всего ваша разметка сломана, <ul> должен содержать только <li>.

Вложенный элемент <ul> должен быть помещен в элемент <li>.

С учетом сказанного, мы можем спрятать пулю на <li>, у которой есть гнездо <ul>, просто имея его.

[yellow] {
  position: relative;
  list-style: none;
}

[yellow]>li {
  position: relative;
  padding-left: 1rem;
}

[yellow]>li:before {
  content: "\25CF";
  color: #F2A900;
  position: absolute;
  left: 0;
}

[nested] {
  /* So we can apply a z-index */
  position: relative;
  /* higher z-index value than the bullet*/
  z-index: 1;
  /* we can use margin here but since we have position relative why not use left */
  left: -1rem;
  /* push the nested ul so it looks nested */
  padding-left: 3rem;
  /* none-transparent background to hide the bullet*/
  background: white;
}

<ul yellow>
  <li>Lifecycle Automation – employees, contractors, business partners, RPA/bots</li>
  <li>Identity Governance controls: </li>
  <li>
    <ul nested>
      <li>Role-based access control (RBAC) model</li>
      <li>Policy model–suitability and separation of duties (SOD)</li>
    </ul>
  </li>
  <li>Account and Password Management</li>
</ul>

---

Если вы хотите присвоить вложенному <ul> ту же пулю, мы можем упростить код следующим образом.

[yellow],[nested] {
  position: relative;
  list-style: none;
}


li {
  position: relative;
  padding-left: 1rem;
}


li:before {
  content: "\25CF";
  color: #F2A900;
  position: absolute;
  left: 0;
}

[nested] {
  position: relative;
  z-index: 1;
  left: -1rem;
  padding-left: 3rem;
  background: white;
}

<ul yellow>
  <li>Lifecycle Automation – employees, contractors, business partners, RPA/bots</li>
  <li>Identity Governance controls: </li>
  <li>
    <ul nested>
      <li>Role-based access control (RBAC) model</li>
      <li>Policy model–suitability and separation of duties (SOD)</li>
    </ul>
  </li>
  <li>Account and Password Management</li>
</ul>

Answer 4

Попробуйте с помощью:

ul li {
  list-style: none;
}

Потому что здесь второй ul (без классов) получил стиль по умолчанию для каждого li. Вы также можете установить li { list-style: none; }, но если вы где-то заказывали списки, это может что-то сломать. Конечно, поля и отступы имеют одинаковую проблему.