Question

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

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，则只需向包含输入字段且需要修改的div添加新类。例如“modify-this”，然后相应地为该类设置样式。

如果您的HTML是动态的并且可能会发生变化，或者由于某种原因无法直接修改HTML，那么实现此目的的第二个最简单方法是使用一些jQuery将类添加到要修改的元素中，可以通过使用.parent（）函数实现这一点，如下所示：

$(document).ready(function () {
  $('#email').parent('.forms_in_ap').addClass('modify-this');
  $('#reEmail').parent('.forms_in_ap').addClass('modify-this');
  $('#nogInFirstName').parent('.forms_in_ap').addClass('modify-this');
  $('#nogInAccNumber').parent('.forms_in_ap').addClass('modify-this');
});

这会将“modify-this”类添加到包含带有上面指定ID的4个输入的div中。然后，您可以正常设置该类的样式。

请注意，这是有效的，因为每个输入都在您需要修改的div内，这意味着div是input元素的父级。通过在parent()函数中输入“forms_in_ap”类，我们告诉jquery找到包含该类的输入的父级。

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

1 个答案: