元素之间的空格。如何避免第一个项目的空格?

3
我可以帮助您翻译以下内容:

我有4个文本字段,我想在它们之间加入10像素的空间。我已经实现了这个效果,但是第一个项目也向右移动了10像素,而我不想让它移动。我考虑为最后3个文本字段设置类,这将起作用,但我仍在寻找更好的想法。有什么建议吗?

HTML:

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

CSS:

span {
    margin:0 10px;
}

为第一个和最后一个项目添加一个类,并使用这些类。 - NineTheme
4个回答

3
避免第一个元素使用margin的更好解决方案是使用CSS的:not选择器,
:not(selector)选择器匹配不是指定元素/选择器的每个元素。
除了第一个span标签外,其他三个标签应具有10px的margin-right和margin-left。我们可以使用:not选择器来实现此目的:

span:not(:first-child) {
    margin:0 10px;
}
<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>


甚至可以将它们组合起来 :not(:first-child):not(:last-child) 来节省行数 :)。 - roberrrt-s
是的@Roberrrt,但是这里的OP想要在第一个标签上执行它 :-) - frnt

3
使用 :first-child 伪选择器:
span:first-child {
    margin: 0;
}

:first-child 选择器(在本例中)选择其父元素(<body>)的第一个子级别<span> 的元素,并对该元素应用样式。同理,:last-child 选择器应用于其父元素的最后一个子级别

此外,使用 :last-child 选择器应该平均分配所有内容,请记住要对元素应用 margin-left 和 right,以下是一个简单的示例:

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>


2
另一种排除第一个的简单方法如下:

:

span + span {
    margin:0 10px;
}
<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>


2
改变CSS:

更改CSS:

span:first-child {
    margin: 0;
}

span {
    margin:0 10px;
}

:first-child 伪类选择器将给第一个 span 元素一个不同的 margin。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接