当其他 li 设置时，如何从 ul 设置为内联块的第一个 li 元素中删除边距

Question

在下面的代码中，所有li都将应用左边距，包括第一个。这会将第一个元素推到右侧。我不希望第一个元素被推送，我希望它保持原位，而其他元素则添加边距。我该怎么做？

ul li
{
    position:relative;
    margin-left:10px;
    display:inline-block
}

Answer 1

你可以使用：first-child伪类

/* added to remove default styles given by browser */
* {
  margin: 0;
  padding: 0;
}
ul li {
  position: relative;
  display: inline-block;
  margin-left: 20px;
  border: 1px solid red;
}
ul li:first-child {
  margin: 0;
}

<ul>
  <li>Hello world</li>
  <li>Hello world</li>
  <li>Hello world</li>
</ul>

或者您也可以使用相邻+兄弟css选择器，它将检查li是否有下一个兄弟姐妹并为其提供margin

/* added to remove default styles given by browser */
* {
  margin: 0;
  padding: 0;
}
ul li {
  position: relative;
  display: inline-block;
  border: 1px solid red;
}
ul li + li {
  margin-left: 20px;
}

<ul>
  <li>Hello world</li>
  <li>Hello world</li>
  <li>Hello world</li>
</ul>

Answer 2

理想情况下，您需要定位除第一个元素之外的所有元素。这可以使用以下选择器完成：

li:nth-child(n+2)