使用类时，HTML5字段之间的边距不准确

在以下版本的简单表单中，字段之间的边距将根据需要显示

该表单显示了3行字段：

第1行包含名字字段和标签

第2行包含姓氏字段和标签

第3行是感兴趣的行，包含两个字段City和ZIP，根据需要正确显示它们之间的间隙

我已经为标签显示了绿色边框，为字段显示了蓝色边框，以便调试

相关的CSS是：

#city {
  width: 58%;
  margin-right: 2%;
}

#ZIP {
  width: 40%;
}

这里的百分比是58，2代表城市领域的右边距，40，加起来是100%。因此，这两个字段适合该行。如上所述，这可以根据需要正确工作

然而，在相同的形式中，我创建了一个类，而不是在字段的CSS中指定右边距。布局立即中断。城市和拉链的两个字段不再适合排成一行。然后，ZIP字段被容纳在下一行中。为了确保这两个字段排成一行，我必须调整百分比，如下所示。但是，ZIP字段的右边缘与其他行中最后一个字段的右边缘不对齐

相关CSS如下所示：

.lastfld {
  margin-right: 0;
}

#city {
  width: 58%;
}

#ZIP {
  width: 38%;
}

<div class="row">
  <div class="col-lbl">
    <label>City / ZIP</label>
  </div>

  <div class="col-flds">
    <input type="text" 
           id="city" name="city" 
           placeholder="City">

    <input type="text" 
           class="lastfld" 
           id="ZIP" name="ZIP" 
           placeholder="ZIP">
  </div>
</div>

请注意，现在百分比2、58和38加起来仅为98%，在ZIP字段之后留下了一个空白

相关标记如下：

.lastfld {
  margin-right: 0;
}

#city {
  width: 58%;
}

#ZIP {
  width: 38%;
}

<div class="row">
  <div class="col-lbl">
    <label>City / ZIP</label>
  </div>

  <div class="col-flds">
    <input type="text" 
           id="city" name="city" 
           placeholder="City">

    <input type="text" 
           class="lastfld" 
           id="ZIP" name="ZIP" 
           placeholder="ZIP">
  </div>
</div>

请在全页视图中观看 个人资料-3 名字 姓 城市/邮编

---

使用浮动，你会得到你想要的结果，我已经做到了，请检查它

城市{ 宽度：58%； 保证金权利：2%； 浮动：左； } lastfld先生{ 右边距：0； } 城市{ 宽度：58%； } 拉链{ 宽度：38%； 浮动：对； } 城市/邮编

---

下面的代码在这里获得正确的优先级

input[type="text"], select, textarea {
    display: inline-block;
    float: left;
    border: 1px solid #ccc;
    margin-right: 2%;
    padding: 12px 20px;
}

双向

使用选择器指定，这是一种完美的方法

input[type="text"].lastfld {
    margin-right: 0px
}

或者使用重要的。 但是使用！不建议使用“重要”选项

.lastfld {
    margin-right: 0 !important;
}

我认为选择器输入[type=text]，select，textarea比.lastfld类具有更高的特异性，因此右边距：2%最终覆盖右边距：0

要修复它，您可以通过合并选择器赋予它更高的特异性：

input[type="text"].lastfld {margin-right: 0;}

另一种方法是添加´！对你的css属性很重要；这将自动赋予它最高的特异性，但我强烈建议你不要走这条路。以我的经验，使用！重要人物在大多数时候都会咬你的背

* { 框大小：边框框； } 身体{ 宽度：100%； 最大宽度：1200px； 保证金：0自动； 填充：0； 背景色：白色； } h1{ 文本对齐：居中； 颜色：海军蓝； } .frm{ /*边框：1px纯绿色*/ 宽度：700px； 保证金：0自动； 边界半径：4px； 填充：20px0； 背景色：f2f2f2；/*浅灰色*/ } .行{ /*边框：1px红色虚线*/ 宽度：100%； 利润率：18px0； } /*清除列后的浮动*/ .行：：之后{ 显示：表格； 明确：两者皆有； 内容：； } L.上校{ 显示：内联块； /*浮动：左*/ 边框：1px点绿色； 宽度：100%； 填充：12px； } F.上校{ 显示：内联块； 浮动：左； 边框：1px点蓝色； 宽度：100%； } 输入[类型=文本]， 选择 文本区{ 显示：内联块； 浮动：左； 边框：1px实心ccc；/*浅灰色*/ 右边距：2%；/*默认右边距*/ 填充：12px 20px； } 文本区{ 高度：200px； 调整大小：无； } 输入[type=text].lastfld{右边距：0；} 输入[类型=文本]：焦点， 选择：焦点， 文本区域：焦点{ 边框：2个实心555； } fname， 名字{ 宽度：100%； } 城市{ 宽度：58%； } 拉链{ 宽度：40%； } 个人资料-3 名字 姓 城市/邮编 就在他心里。这是个问题

输入[type=text]的特异性为0011，而 .lastfld的规格为0010 0011否决0010，因此输入[type=text]将胜出.lastfld

你能做些什么？ 使小的特异性更高：将.lastfld更改为输入[type=text]：last child 0010>0021 使大的特定性变小：将输入[type=text]更改为[type=text]0011>0010 使用样式属性：style=margin right:0，其专用性为1000 否决！重要的是，这可以看作是增加了10000的特殊性，但这不是官方术语 我会选择1或2 3可以接受，但不推荐，4完全不推荐。例如，如果您需要对无法更改且使用样式属性的HTML代码进行样式设置，则仅将其作为最后一根稻草

1. 或

2. 您可以在此处计算和比较您的特异性：

---

好发现！我没注意到这一点。很好的解释。而且绝对正确。我应该想到这一点。下次，我会更小心的。谢谢。这对我来说是个奇怪的案子。如果你问我哪一个选择器具有更高的特异性，我会说。lastfld。据我所知，类选择器比元素选择器更具体，我怀疑添加[type=text]会增加它的特殊性。@SSteven我在这里测试过这个：如果你取消注释注释了注释的css部分，你会看到两个输入都变成蓝色。这意味着.test比input更具体，但input[type=text]比.test更具体。很高兴知道，我会记住的。重要的是一个不好的建议。特异性的存在是有原因的。让你的选择器更具体，否则你会不可避免地想要覆盖它！重要的是，但唯一的方法是用另一个！在更高的特异性上很重要。接下来，你知道，一切都很重要。你完全正确。我试图双向解释。但是重要的应该是最后的选择。