html - css 删除继承的列表样式

Question

我有这样的css代码

<ul class="simple-list">                                
    <li>
      <ul>
        <li>Paper</li>
        <li>Pen</li>
     </ul>
    </li>
    <li>
      <ul>
        <li>Paper</li>
        <li>Pencil</li>
     </ul>
    </li>
</ul>

现在当我使用这样的风格

.simple-list li {
border-bottom: 1px solid #EEE;
display: block;
}

它也会影响所有子 li 元素。有人能告诉我如何让它只影响第一个 li 元素。?

Answer 1

像这样：

.simple-list li:first-child {

您可以在 caniuse.com 上查看对第一个孩子的支持

Answer 2

您是指 .simple-list 的直接 li 子级（即第一级）吗？还是只是第一个？如果只有你想要的直系子女

.simple-list > li 

对于您想要@Steve Fenton 上面的答案的第一个