Question

我不是一个html开发人员所以我想问一下如何根据他们的id为按钮着色。我有所有的一般设置，但我想根据ID改变每个颜色。谢谢。

button {
  height:6vh;
  width:10vw;
  font-size:3vh;
  text-align:center;
  position:relative;
  border:none;
}

button#0 {
  background-color:red;
}

button#1 {
  background-color:green;
}

button#2 {
  background-color:yellow;
}

<button  name="0" id="0" type="submit">0</button><button  name="1" id="1" type="submit">1</button><button  name="2" id="2" type="submit">2</button>

Answer 1

ID不能以数字开头，因此您可以使用课程

＆＃13;

button {
  height: 6vh;
  width: 10vw;
  font-size: 3vh;
  text-align: center;
  position: relative;
  border: none;
}

.button0 {
  background-color: red;
}

.button1 {
  background-color: green;
}

.button2 {
  background-color: yellow;
}

＆＃13;

<button  name="0" id="0" class="button0" type="submit">0</button>
<button  name="1" id="0" class="button1" type="submit">1</button>
<button  name="0" id="2" class="button2" type="submit">2</button>

＆＃13;

Answer 2

html中的id为0而不是button0所以你应该使用正确的id名称，例如：#ss在css

 #id0 {
   background-color:red;

}

或更改html中的ID

<button  name="button0" id="id0" type="submit">0</button>

 #button0 {
   background-color:red;
}

且id必须是唯一的

  <button  name="0" id="button0" type="submit">0</button>
  <button  name="0" id="botton1" type="submit">1</button>
  <button  name="0" id="button0" type="submit">2</button>

Answer 3

我不能以号码开头。阅读这篇文章：https://css-tricks.com/ids-cannot-start-with-a-number/并且id也应该是唯一的，但我认为你只是输错了。

根据指定，你可以使用数字作为ID，但它不会回应经典选择器element#0作为交换，你可以定位element[id='0']。

Answer 4

ID名称不能以数字开头。有关命名ID和类的详细信息，请参阅this article.

button {
  height:6vh;
  width:10vw;
  font-size:3vh;
  text-align:center;
  position:relative;
  border:none;
}

button#Btn0 {
  background-color:red;
}

button#Btn1 {
  background-color:green;
}

button#Btn2 {
  background-color:yellow;
}

<button  name="0" id="Btn0" type="submit">0</button><button  name="1" id="Btn1" type="submit">1</button><button  name="2" id="Btn2" type="submit">2</button>

所有按钮的通用css，但根据id更改每个按钮的颜色

4 个答案: