Question

我有4个文本字段，我试图在它们之间留出10px的空间。我得到了它的工作，但第一项也移动了10px，我不希望它。我想到了最后3个文本字段的类，这将有效，但我仍然在寻找一个更好的主意。有什么建议吗？

HTML：

<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>

CSS：

span {
    margin:0 10px;
}

Answer 1

使用:first-child伪选择器：

span:first-child {
    margin: 0;
}

在我们的案例中，

:first-child选择（在这种情况下）第一个<span>，即它的父亲（<body>）的第一个孩子，并应用样式仅限该元素。同样适用于:last-child，它将样式应用于其父项的最后一个孩子。

另外，使用:last-child选择器应该将所有内容平分，请记住要对称，你也可以对元素进行左右边距，一个小例子：

span {
  margin: 0 10px;
}

span:first-child {
  margin: 0 10px 0 0; // right 10px
}

span:last-child {
  margin: 0 0 0 10px; // left 10px
}

<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>

Answer 2

避免margin第一个元素的更好解决方案是使用CSS的:not选择器，

：not（selector）选择器匹配每个不是的元素指定的元素/选择器。

保留第一个span标记，其他三个标记应为margin-right和margin-left 10px。我们可以使用:not选择器执行此操作：

span:not(:first-child) {
    margin:0 10px;
}

<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>

Answer 3

更改css：

span:first-child {
    margin: 0;
}

span {
    margin:0 10px;
}

:first-child伪选择器将为第一个span元素提供不同的边距。

Answer 4

排除第一个的另一种简单方法:)：

＆＃13;

span + span {
    margin:0 10px;
}

＆＃13;

<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>

＆＃13;

元素之间的空间。如何避免第一项间距？

4 个答案: