元素之间的空间。如何避免间隔第一项？
元素之间的空间。如何避免间隔第一项？
提问于 2016-12-24 06:01:20
我有4个文本字段，我试图在它们之间形成一个10 to的空格。我让它起作用了，但是第一件东西也移动了10便士，我不想要它。我考虑了最后3个文本字段的类，这将起作用，但我仍然在寻找一个更好的想法。有什么建议吗？
HTML:
<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>CSS:
span {
margin:0 10px;
}回答 4
Stack Overflow用户
回答已采纳
发布于 2016-12-24 06:02:06
使用: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>
Stack Overflow用户
发布于 2016-12-24 06:10:53
一个更好的解决方案，以避免margin的第一个元素是我们CSS的:not选择器，
不(选择器)选择器匹配不是指定元素/选择器的每个元素。
除了第一个span标记之外，其他三个应该具有margin-right和margin-left of 10px。我们可以使用:not选择器来完成这个任务：
span:not(:first-child) {
margin:0 10px;
}<span>text</span>
<span>text</span>
<span>text</span>
<span>text</span>
Stack Overflow用户
发布于 2016-12-24 06:05:39
更改css：
span:first-child {
margin: 0;
}
span {
margin:0 10px;
}:first-child伪选择器将为第一个span元素提供不同的裕度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/41313914
复制相关文章
点击加载更多
相似问题
如何选择间隔之间的元素
内容:在第一项和最后一项之间有相等空间的间隔。
避免减号和金额之间的行间隔。
元素之间的空间
删除html元素之间的自动间隔/行间隔？
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
