Question

我继承了旧版代码库，并负责覆盖少数CSS选择器（除其他外）。简单。但是我遇到了一个奇怪的ID，无法弄清楚该如何覆盖。

这是一个代码段：

<form id="formInfo" name="formInfo" method="post">
  <label>Phone Number*</label>
  (
  <input id="formInfo:areaCode" name="formInfo:areaCode" type="text" value="" maxlength="3" size="3" class="autotab">
  ) -
  <input id="formInfo:phonePrefix" name="formInfo:phonePrefix" type="text" value="" maxlength="3" size="3" class="autotab"><input id="formInfo:phoneSuffix" name="formInfo:phoneSuffix" type="text" value="" maxlength="4" size="4">  
</form>

我要做的就是在最后一个输入的左侧添加10px的空白，这样两个字段就不会相互抵触了。

我不熟悉这种语法。我以前从未见过ID与冒号（:)结合在一起。

这是我尝试过的：

#formInfo:phoneSuffix {
    margin-left: 10px;
}

#phoneSuffix {
    margin-left: 10px;
}

#formInfo #phoneSuffix {
    margin-left: 10px;
}

不出所料，这些方法都无法增加所需的边距。

欢迎任何帮助。

如果您想在这里工作，请在这里my fiddle。

限制：正如我所说，这是旧版代码。不幸的是，我没有能力更改或添加标记。这是在多个应用程序中使用的SPA。更改它可能会有意想不到的副作用。我必须将其作为SPA的一部分来处理，并覆盖输入边距。不太理想，但这就是难题。

谢谢！

Answer 1

您可以使用attribute selector。

[id='formInfo:phoneSuffix'] {
  margin-left: 10px;
}

<form id="formInfo" name="formInfo" method="post">
  <label>Phone Number*</label>
  (
  <input id="formInfo:areaCode" name="formInfo:areaCode" type="text" value="" maxlength="3" size="3" class="autotab">
  ) -
  <input id="formInfo:phonePrefix" name="formInfo:phonePrefix" type="text" value="" maxlength="3" size="3" class="autotab"><input id="formInfo:phoneSuffix" name="formInfo:phoneSuffix" type="text" value="" maxlength="4" size="4">  
</form>

Answer 2

您可以使用反斜杠转义冒号

#formInfo\:phoneSuffix {
    margin-left: 10px;
}

请参阅：Handling a colon in an element ID in a CSS selector

Answer 3

您的密码必须是

#formInfo[name="phoneSuffix"] {
  margin-left: 10px
}

-

<form id="formInfo" name="formInfo" method="post">
  <label>Phone Number*</label>
  (
  <input id="formInfo" name="areaCode" type="text" value="" maxlength="3" size="3" class="autotab">
  ) -
  <input id="formInfo" name="phonePrefix" type="text" value="" maxlength="3" size="3" class="autotab"><input id="formInfo" name="phoneSuffix" type="text" value="" maxlength="4" size="4">  
</form>

Working example.

尝试在输入字段中添加左边距

3 个答案: