CSS-класс применяет, но не ID

Question

CSS-класс применяет, но не ID

0

В настоящее время я создаю викторину, поэтому я хотел бы применить один и тот же класс, но с разными идентификаторами до трех текстовых входов. Однако по какой-то причине мой класс CSS применяется, но мои идентификаторы - нет. HTML:

            <form>
                <input id="0" class="textbs" type="text" >
                <input id="1" class="textbs" type="text">
                <input id="2" class="textbs" type="text">
                <input type="button" id="submmit" value="GO">
            </form>

CSS:

.textbs {
    height: 50px;
    width: 400px;
    font-size: 25px;
    font-family: geneva;
    border: solid rgba(255, 0, 0, 0.54);
    border-width: 5px;
    border-radius: 7px;
    position: absolute;
    margin-top: 150px;
    padding-left: 50px;
}

#0 {
    background-color: black;
}

#1 {
    display: none;
}

#2 {
    display:none;
}

Я попытался изменить фоновый цвет # 0 на черный, чтобы узнать, идентифицировал ли он идентификатор ввода или нет, и он остался белым (по умолчанию), но когда я добавил фоновый цвет: черный; line to.textbs. Помоги пожалуйста!

andryuu87 15 апр. 2014, в 05:46

Источник

2

Серьезно, никогда не называйте элементы, начинающиеся с цифр.
witherwind 15 апр. 2014, в 03:31

Теги:

html

css

3 ответа

0

id не может начинаться с числа.

При необходимости измените их на "один", "два", "три" и т.д.

aaronegan 15 апр. 2014, в 02:17

0

Почему вы приводите <div> конкретно?
faintsignal 15 апр. 2014, в 03:31

0

укажите id как идентификаторы, начинающиеся с букв или специального символа '_'. И позиция: "абсолютный" не требуется. попробуй это.

<form>
                <input id="a0" class="textbs" type="text" >
                <input id="a1" class="textbs" type="text">
                <input id="a2" class="textbs" type="text">
                <input type="button" id="submmit" value="GO">
            </form>
.textbs {
    height: 50px;
    width: 400px;
    font-size: 25px;
    font-family: geneva;
    border: solid rgba(255, 0, 0, 0.54);
    border-width: 5px;
    border-radius: 7px;

    margin-top: 150px;
    padding-left: 50px;
}

#a0{
    background-color: black;
}

#a1 {
    display: none;
}

#a2 {
    display:block;
}

SPEC 15 апр. 2014, в 01:46

Ещё вопросы

Серьезно, никогда не называйте элементы, начинающиеся с цифр.
Почему вы приводите <div> конкретно?

Abhinav Gauniyal · Accepted Answer · 2014-04-15T01-13-00.000Z

Идентификатор не должен начинаться с номера, в то время как вы все еще можете попробовать:

[id='0'] {
 /* should work */
}

 #0 {
  /* shouldn't work */
}

DEMO

Хотя использование селектора атрибута (вместо селектора идентификатора) может работать в этом случае, но он не может заменить селектор идентификатора. Селектор атрибута имеет специфичность намного меньше, чем селектор идентификатора (который имеет наибольшую специфичность).