Question

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

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

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的元素，因此在不需要样式化时添加父元素。

请注意＆＃34;输入＆＃34; 由于ID是唯一的，因此无需输入＆＃34;输入＆＃34;在ID之前，但是对于诸如输入之类的元素，可以将其视为在class / id之前具有选择器的良好实践，从而使您更清楚自己的样式。

然而，这并不适用于像div这样的东西，因为网上的几乎所有内容都是div，在类/ id之前添加它就是矫枉过正。

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

1 个答案: