样式到包含特定输入元素的特定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工作正常，但不知道这是否是正确的，标准或优化代码，请建议我。

任何带有“id”的元素只需要在规则中使用它的id，因为只能有一个，所以不需要让解析器经历更多的事情。出于可读性的原因，可以使用父元素类或类似元素，因此，当查看CSS文件时，它会提示这些元素放置在标记中的位置。 – LGSon

刚刚更新了我的问题，我错误地提到了它。 –

我会关闭这个问题。对不起 –

答

由于您具有每个具有HTML ID的特定输入，因此不需要指定父类。

这应该为你工作，这是更清洁和更简单：

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

这里要记住的最重要的事情是ID都是唯一的。不能有两个具有相同ID的元素，因此在样式化时不需要添加父元素。

关于“输入”的注意事项：由于ID是唯一的，因此不需要在ID之前加入“输入”，但可以将其视为输入等元素优先选择器的良好实践到班级/身份证，让你更清楚你的造型。

但是，这并不适用于像div这样的东西，因为几乎网上的所有东西都是div，所以在class/id之前添加它只是矫枉过正。

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

相关推荐