仅在第一个列出的李的子弹,不嵌套

我有一个列表,列表上有黄色的项目符号。但是如果还有嵌套的ul,也希望将其删除。有没有办法只做CSS?

example image

   
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>
评论
  • 假装
    假装 回复

    尝试:

    ul li {
      list-style: none;
    }
    

    Because here the second ul (without classes) got the default styling for each li. You may also set li { list-style: none; }, but if you have ordered lists somewhere it could break something. Of course, margins and paddings have the same issue.

  • lest
    lest 回复

    Your CSS is targeting all the li tags below the ul.list-bullets--yellow tag. you need to use the child combinator selector >

    See https://css-tricks.com/child-and-sibling-selectors/ for more information

       
    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>
  • ousman
    ousman 回复

    this can be done by switching ul.list-bullets--yellow li:before to ul.list-bullets--yellow > li:before

    This is a CSS "child selector", you can read more on them on w3schools. Basically the added > says only if the li:before is a direct child of 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>