html - 包含特定输入元素的特定 div 类元素的样式

Question

我的页面中有以下一组输入文本元素。我实际上需要将样式应用于包含 #email、#reEmail、#nogInFirstName、# 的“forms_in_ap”类的 div 元素nogInAccNumber 元素，在所有 MAC 和 IOS 设备的 Safari 浏览器中。

将样式应用于特定 div 的特定元素的 CSS:

html[xmlns*=""]:root
.form_input_wrap input#email,
.form_input_wrap input#reEmail,
.form_input_wrap input#nogInFirstName,
.form_input_wrap input#nogInAccNumber
{
  height: 42px;
}

HTML 代码:

<div class="asd removeFocus">
  <div class="forms_in_ap removeFocus">
    <label for="email">Email address</label>
    <div class="removeFocus">
      <input type="text" id="email" name="email" class="required error ">
      <span id="email-error" class="error">Please enter a Valid Email Address.</span>
    </div>
  </div>
  <div class="forms_in_ap removeFocus">
    <label for="reEmail">Re-enter email address</label>
    <div class="removeFocus">
      <input type="text" id="reEmail" name="reEmail" maxlength="64">
    </div>
  </div>
</div>

<div class="form">
  <div class="forms_in_ap">
    <label for="nogInFirstName">First Name</label>
    <div>
      <input type="text" name="txtFName" maxlength="15" id="nogInFirstName">
    </div>
  </div>
  <div class="forms_in_ap">
    <label for="nogInLastName">Last Named</label>
    <div>
      <input type="text" name="txtLName" maxlength="15" id="nogInLastName">
    </div>
  </div>
  <div class="forms_in_ap">
    <label for="nogInAccNumber">Coupon Number</label>
    <div>
      <input type="text" name="shcCreditCardNumber" maxlength="19" id="nogInAccNumber">
    </div>
  </div>
  <div class=" forms_in_ap">
    <div class="ccvDiv">
      <label for="cvv"> pin</label>
      <div>
        <input type="text" class="cvvWidth required" name="cvv" id="cvv" maxlength="3">
      </div>
    </div>
  </div>
</div>

上面的 CSS 工作正常，但不确定这是正确的、标准的还是优化的代码，请给我建议。

Answer 1

由于每个特定输入都有一个 HTML ID，因此您无需指定父类。

这应该对你有用，它更干净、更简单:

input#email,
input#reEmail,
input#nogInFirstName,
input#nogInAccNumber
{
  height: 42px;
}

这里要记住的最重要的事情是 ID 是唯一的。不能有两个具有相同 ID 的元素，因此在不需要样式时添加父元素。

关于“input”的注意事项:由于 ID 是唯一的，因此在 ID 之前不需要有“input”，但对于诸如 input 到在类/id 之前有选择器，使您的样式更清楚。

但是，这不适用于 div 之类的东西，因为网络上几乎所有东西都是 div，将它添加到类/id 之前就有点过分了。