DEMO

Question

我目前正在构建一个测验，因此我想将相同的类应用于三个文本输入但使用不同的ID。但是，出于某种原因，我的CSS类正在应用，但我的ID不是。 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背景颜色更改为黑色以查看它是否识别出输入ID，并且它保持白色（默认），但是当我添加背景颜色时：黑色;它应用于.textbs。求救！

Answer 1

ID不应该以数字开头，而你仍然可以试试这个：

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

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

DEMO

Answer 2

id不能以数字开头。

将他们改为＆＃34;一个＆＃34; ＆＃34; 2＆＃34; ＆＃34;三＆＃34;等等，如果需要的话。

Answer 3

请将ID作为以字母或特殊字符开头的标识符＆＃39; _＆＃39;。并且位置：＆＃34;绝对＆＃34;不需要。试试这个。

<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;
}

CSS类应用但不是id

3 个答案:

DEMO