Html 元素之间的空间。如何避免将第一项隔开？

我有4个文本字段，我试图在它们之间留出10px的空间。我让它工作了，但第一个项目也移动了10像素，我不想它。我考虑了最后3个文本字段的类，这将起作用，但我仍然在寻找一个更好的想法。有什么建议吗

HTML:

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

span {
    margin:0 10px;
}

---

使用

：第一个子项

伪选择器：

span:first-child {
    margin: 0;
}

：第一个子元素

选择（在本例中）第一个子元素，即父元素（

）的第一个子元素，并仅将样式应用于该元素。

：last child

也是如此，它将样式设置应用于其父级的最后一个子级

另外，使用

：last child

选择器应将所有内容平均分割，请记住要对称，您还需要将左边距和右边距应用于元素，一个小示例：

span{
利润率：0.10px；
}
跨度：第一个孩子{
边距：0 10px 0；//右10px
}
最后一个孩子{
边距：0 10px；//左10px
}

文本
文本
文本
文本

更改css：

span:first-child {
    margin: 0;
}

span {
    margin:0 10px;
}

---

:first child

伪选择器将为第一个

span

元素提供不同的边距。

避免第一个元素的

边距的更好解决方案是使用CSS的
:not
选择器

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

离开第一个span标记，其他三个span标记应具有
10px
的
margin right
和
margin left
。我们可以使用
：not
选择器执行此操作：

span:first-child {
    margin: 0;
}


span:not（：第一个孩子）{
利润率：0.10px；
}
文本
文本
文本
text
排除第一个选项的另一种简单方法：）：


span+span{
利润率：0.10px；
}
文本
文本
文本
text
或甚至将它们组合起来
：not（：first child）：not（：last child）
以保存行：）。Yes@Roberrrt但这里OP希望在第一个标记上执行该操作：-）为第一个和最后一个项添加一个类并使用这些类