Question

我尝试使用margin-right 35px来设置同一班级的4个div（彼此相邻）以均匀划分它们，除了最后一个div所以它没有＆＃ 39; t为已经分配到包装器右侧的30px margin添加额外的边距。

现在，我还不是编码方面的专家，所以我可能在这里错了，但我想我可以将margin-right: 0;内联添加到最后一个div来覆盖属性值{{1}在我的样式表中。

这会有用吗？或者我有没有看到不同的解决方案？

编辑：感谢大家，最后一个子伪选择器工作了！： - ）

Answer 1

无需添加内联CSS，您可以使用:last-child psuedo选择器轻松完成。例如，如果这是您的HTML：

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

以下CSS已应用于它：

.box {
     display: inline-block;
     margin-right: 35px;
}

您可以使用此CSS从最后一个div中删除margin-right：

.box:last-child {
     margin-right: 0px;
}

＆＃13;

#container {
  border: 2px solid black;
  width: 317px;
}
.box {
  display: inline-block;
  background: blue;
  width: 50px;
  height: 50px;
  margin-right: 35px;
}
.box:last-child {
  margin-right: 0px;
}

＆＃13;

<div id="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

＆＃13;

Answer 2

这将覆盖样式和工作。但另一种解决方案是在工作表中使用:last-child伪选择器。

有关last-child的更多信息： http://www.w3schools.com/cssref/sel_last-child.asp

Answer 3

对于级联而言，内联样式表（添加了<style>元素）与外部样式表（添加了<link>元素）的处理方式没有区别。

使用style属性添加的规则被视为具有比任何样式表更高的特异性，但仍然可以被!important规则覆盖（除非它也是!important）。< / p>

如需进一步阅读，请参阅The Cascade。

使用:last-child或:last-of-type可能最好不要使用内联样式。

Answer 4

您可以使用:last-child选择器消除最后一个div的边距：

.ctr {
  border: 1px solid red;
  display: inline-block;
}

.foo {
  margin-right: 35px;
  display: inline-block;
  border: 1px solid blue;
}

.foo:last-child {
  margin-right: 0;
}

<div class="ctr">
  <div class="foo">one</div>
  <div class="foo">two</div>
  <div class="foo">three</div>
  <div class="foo">four</div>
</div>

内联css是否覆盖样式表css文件？

4 个答案: