general css 所有按钮，但根据 id 改变每个按钮的颜色

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

html 中的 id 是 0 而不是 button0，因此您应该使用正确的 id 名称，例如：#id0 in 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 2

ID不能以数字开头，可以用class

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

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

Answer 3

ID 不能以数字开头。阅读这篇文章：https://css-tricks.com/ids-cannot-start-with-a-number/ 并且 id 应该是唯一的，但我认为您只是在问题中输入错误。

按照那里的规定，您可以使用数字作为 ID，但它不会响应经典选择器 element#0 作为交换，您可以定位 element[id='0'].

Answer 4

ID名称不能以数字开头。有关命名 ID 和 class 的更多信息，请参阅 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>

general css 所有按钮，但根据 id 改变每个按钮的颜色

general css for all buttons, but change color for each based on id

html

css

background-color