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

Question

我的页面中有一组以下的输入文本元素。实际上我需要在所有MAC和IOS设备的Safari浏览器中将style应用于包含#email，#reEmail，#nogInFirstName，#nogInAccNumber元素的“forms_in_ap”类的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，则可以简单地向包含输入字段并需要修改的div添加一个新类。例如“修改 - 这个”，然后相应地设置该类的样式。

如果您的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'); 
}); 

这将“修改 - 这”类添加到包含4个输入与上面指定的ID的div。然后，您可以照常设计该课程。

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