樣式到包含特定輸入元素的特定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找到包含該類的輸入的父代。