样式到包含特定输入元素的特定div类元素 [英] style to specific div class elements containing a specific input elements

问题描述

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

I have a below set of input text elements in my page. I actually need to apply style to div element of "forms_in_ap" class containing the #email, #reEmail, #nogInFirstName, #nogInAccNumber elements alone, in Safari browser of all MAC and IOS devices.

将样式应用于特定Div 的特定元素的CSS

CSS to apply style to specific elements of Specific 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工作正常，但不确定这是一个正确，标准或优化代码，请。

The above css works fine but not sure whether this is a correct, standard or optimize code please suggest me.

推荐答案

如果您有权访问HTML，您只需向包含输入字段的div添加一个新类，需要修改。例如modify-this，然后相应地为该类设置样式。

If you have access to the HTML you can simply add a new class to the divs that contain the input fields and that need to be modified. For example "modify-this", then style that class accordingly.

如果您的HTML是动态的并且可能更改，或者您无法直接修改HTML原因，第二个最简单的方法来实现这一点是使用一些jQuery添加一个类到你想要修改的元素，你可以通过使用.parent（）函数，如下：

If your HTML is dynamic and might change, or if you can't modify the HTML directly for some reason, the second easiest way to achieve this is using some jQuery to add a class to the elements you want to modify, you can achieve this by using the .parent() function, like so:

$(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类添加到包含4个输入的div指定。然后你可以正常地对该类进行风格化。

This will add the "modify-this" class to the divs that contain the 4 inputs with the IDs specified above. You can then style that class as normal.

请注意，这是因为每个输入都在div中，您需要修改，这意味着div是输入元素的父代。通过在 parent（）函数中输入类forms_in_ap，我们告诉jquery查找父类包含该类的输入。

Note that this works because each input is inside the div that you need to modify, meaning that the div is the parent of the input element. By entering the class "forms_in_ap" into the parent() function, we tell jquery to find the parent of the input that contains that class.

这篇关于样式到包含特定输入元素的特定div类元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！