как написать правильный селектор для того, что находится внутри поля ввода?

#css #forms #css-selectors #inputbox

#css #формы #css-селекторы #inputbox

Вопрос:

У меня есть форма inputbox, и мне нужно написать хороший селектор. Мне нужно присвоить атрибуты только тому, что находится внутри inputbox. форма выглядит следующим образом:

 <label></label>
<input type="text" disabled="disabled" name="xxx" size="100" value="abcd" class="yyy" />

однако у меня на странице есть больше элементов этого класса.

каков наилучший способ?

1. Где находится ваш контейнер inputbox? Это самая важная часть написания селектора для отслеживания всех его потомков (зная его идентификатор / имя). Кроме того, какой атрибут всех элементов ввода будет общим?

2. <набор полей> <легенда> это мое поле ввода</legend> <p> <label></label> <тип ввода=»текст» отключен = «disabled» имя= «xxx» размер = «100» значение = «abcd» класс = «гггг» /> </fieldset>

3. Если это имя класса, о котором вы беспокоитесь, лучше, если вы назовете класс, отличный в качестве стандартного от чего-то более подходящего, если вы передадите исходный код кому-то другому, поймут ли они, чего вы пытались достичь быстро? Если нет, посмотрите на именование вещей лучше, хотя псевдокод помогает.

4. ну, я просто пишу css, поэтому я не могу редактировать html, за это отвечает кто-то другой

Ответ №1:

Поскольку вы добавили класс «yyy», вы можете просто продолжить и выполнить следующее:

 <style type="text/css">
.yyy {
  font-size: 14px;
  font-family: Arial;
  color: #FF0000;
}
</style>

Вы, конечно, можете вставить приведенный выше HTML-код и поместить его в свой HTML-документ, но лучше всего держать HTML и CSS подальше друг от друга.

Итак, добавьте этот код в свой тег head:

 <link href="some/style.css" type="text/css" rel="stylesheet" />

И внутри style.css:

 .yyy {
 font-size: 14px;
 font-family: Arial;
 color: #FF0000;
}

1. спасибо, но проблема в том, что у меня больше элементов класса ‘yyy’, но я хочу, чтобы они выглядели немного иначе, чем то, что будет внутри моего поля ввода

2. Хорошо, но если вы не хотите переименовывать класс, тогда прикрепите к нему другой элемент: например: <span class=»demo»><input …. class=»гггг»></span> затем измените начальную строку css на: .demo .гггг { размер шрифта: 14 пикселей;….

3. @mike Ты хочешь сказать, что у тебя есть больше элементов, не входящих в класс yyy? Если да, то почему бы не настроить таргетинг для ваших входных элементов с классом yyy. ‘ввод. гггг {}’

4. ну, нет, к сожалению, у меня есть еще пара полей ввода с тем же классом на других страницах, которые было бы неплохо выглядеть по-другому

5. есть ли какой-либо способ, которым я могу использовать имя из формы, чтобы написать селектор для этого определенного поля ввода?

Ответ №2:

Вы могли бы использовать любой из них input.yyy {} , который будет работать во всех браузерах, но если у вас есть более одного элемента ввода на странице с классом yyy, он выберет их все.

Альтернативой является ввод [name = xxx] с использованием нового селектора CSS3, но это не будет работать в старых браузерах, поэтому зависит от того, насколько важно, чтобы стиль работал везде.