Стиль для конкретных элементов класса div, содержащих конкретные элементы ввода

У меня есть приведенный ниже набор элементов ввода текста на моей странице. Мне действительно нужно применить стиль к элементу div класса «forms_in_ap», содержащий только #email, #reEmail, #nogInFirstName, #nogInAccNumber элементов в браузере Safari всех устройств MAC и IOS.Стиль для конкретных элементов класса 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» просто нуждается в его идентификаторе в правиле, поскольку его может быть только один, поэтому нет необходимости в том, чтобы синтаксический анализатор проходил через что-то большее. По причине удобочитаемости можно использовать класс родительских элементов или аналогичный, поэтому, когда вы смотрите в файле CSS, он дает вам представление о том, где эти элементы помещаются в разметку. – LGSon

Только что обновил мой вопрос, я упомянул об этом неправильно. –

Я закрою этот вопрос. извините –

Поскольку у вас есть каждый конкретный ввод с HTML-идентификатором, вам не нужно указывать родительский класс.

Это должно работать для вас, это чище и проще:

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

Самое главное, чтобы помнить, что идентификаторы уникальны. У вас не может быть двух элементов с одинаковым идентификатором, поэтому добавление родительского элемента при стилизации не требуется.

Примечания о «входе»: Так как идентификаторы являются уникальными, нет никакой необходимости, чтобы иметь «вход» перед идентификатором, но это можно рассматривать как хорошую практику для таких элементов, как входы, чтобы иметь селектор предварительный к классу/id, что делает его более четким, чем вы ставите.

Однако это не относится к таким вещам, как divs, поскольку почти все в Интернете - это div, добавляя его до того, как класс/id просто перехитрит.

источник

2016-12-15 12:44:06

Стиль для конкретных элементов класса div, содержащих конкретные элементы ввода

ответ

Смежные вопросы