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 {

您可以check support for first-child on caniuse.com