时间戳

首页 > 解决方案 > 项目符号仅在第一个列出的 li 上，不嵌套

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

问题描述

我有这个列表，列表上有黄色项目符号。但是，如果还有嵌套的 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>

标签： htmlcss

解决方案

这可以通过切换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>

推荐阅读