css 删除ul [duplicate]的li元素第一级的左填充和边距

qmelpv7a 于 2023-03-14 发布在其他

关注(0)|答案(2)|浏览(134)

此问题在此处已有答案：

Does UL have default margin or padding [duplicate]（2个答案）
7小时前关闭。
我有一个嵌套的Ul li元素
列表可以嵌套（列表中的列表）
第一级li元素咖啡，茶和牛奶，默认填充和边距。如何删除第一级li元素左边距和填充。

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

2条答案

如果第一个ul元素有一些父元素（例如div），则可以使用直接子选择器>：

div > ul {
  margin: 0;
  padding: 0;
}

但是如果你只有上面发布的这个结构，你可以使用:not选择器：

ul:not(li ul) {
  margin: 0;
  padding: 0;
}

您还可以重置第一个ul元素的填充和边距，并在下一个CSS规则中覆盖嵌套在ul中的ul：

ul {
  margin: 0;
  padding: 0;
}

ul ul {
  margin: revert;
  padding: revert;
}

revert会将margin和padding重置为以前的值，但是您也可以只使用某个值，例如10px而不是revert

.first-ul{显示：inline;}添加此类