项目符号仅在第一个列出的li上，而不是嵌套

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的目标是ul.list-bullets--yellow标签下的所有li标签。您需要使用子组合符选择器>

有关更多信息，请参阅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>元素中。

如上所述，我们可以通过拥有nest <ul>来隐藏<li>上的子弹。

​

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

​