樣式到包含特定輸入元素的特定div類元素

我的頁面中有一組以下的輸入文本元素。實際上，我需要在所有MAC和IOS設備的Safari瀏覽器中將style應用於僅包含#email,#reEmail,#nogInFirstName,#nogInAccNumber元素的「forms_in_ap」類的div元素。樣式到包含特定輸入元素的特定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工作正常，但不知道這是否是正確的，標準或優化代碼，請建議我。

來源

2016-12-15 Dinesh Kumar

任何帶有「id」的元素只需要在規則中使用它的id，因爲只能有一個，所以不需要讓解析器經歷更多的事情。出於可讀性的原因，可以使用父元素類或類似元素，因此，當查看CSS文件時，它會提示這些元素放置在標記中的位置。 – LGSon

剛剛更新了我的問題，我錯誤地提到了它。 –

我會關閉這個問題。對不起 –

由於您具有每個具有HTML ID的特定輸入，因此不需要指定父類。

這應該爲你工作，這是更清潔和更簡單：

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

這裏要記住的最重要的事情是ID都是唯一的。不能有兩個具有相同ID的元素，因此在樣式化時不需要添加父元素。

關於「輸入」的注意事項：由於ID是唯一的，因此不需要在ID之前加入「輸入」，但可以將其視爲輸入等元素優先選擇器的良好實踐到班級/身份證，讓你更清楚你的造型。

但是，這並不適用於像div這樣的東西，因爲幾乎網上的所有東西都是div，所以在class/id之前添加它只是矯枉過正。

來源

2016-12-15 12:44:06

樣式到包含特定輸入元素的特定div類元素

回答

相關問題