Question

我有一个包含4个按钮的列表，每个按钮属于同一个类，每个按钮都有自己的ID。我希望4个按钮的形状和大小相同但颜色不同。（字母C R U D将在稍后用更合适的字母替换）

- html代码段

<ul id="query_type">
  <li class="round-button" id="create">C</li>
  <li class="round-button" id="read">R</li>
  <li class="round-button" id="update">U</li>
  <li class="round-button" id="delete">D</li>
</ul>

-css文件

.round-button {
    width: 10%;
    height: 0;
    padding-bottom: 10%;
    border-radius: 50%;
    border: 2px solid #f5f5f5;
    overflow: hidden;
    background: #464646;
    box-shadow: 0 0 3px gray;
}

.round-button:hover {
    background: #262626;
}

如何为每个id覆盖.round-button的background属性？

Answer 1

Ids比类更具体，所以你只能用id来定位它们。

.round-button {
  width: 10%;
  height: 0;
  padding-bottom: 10%;
  border-radius: 50%;
  border: 2px solid #f5f5f5;
  overflow: hidden;
  background: #464646;
  box-shadow: 0 0 3px gray;
}
.round-button:hover {
  background: #262626;
}
#create {
  background: orange;
}
#read {
  background: yellow;
}
#update {
  background: blue;
}
#delete {
  background: green;
}

<ul id="query_type">
  <li class="round-button" id="create">C</li>
  <li class="round-button" id="read">R</li>
  <li class="round-button" id="update">U</li>
  <li class="round-button" id="delete">D</li>
</ul>

参考：Calculating a selector's specificity

Answer 2

您可以为不同颜色的每个按钮创建不同的类，例如：

<ul id="query_type">
  <li class="round-button yellow" id="create">C</li>
  <li class="round-button red" id="read">R</li>
  <li class="round-button green" id="update">U</li>
  <li class="round-button pink" id="delete">D</li>
</ul>

并在css中为每个类创建相应的背景颜色。

或者您可以使用他们的ID来引用每个按钮并为其指定背景颜色：

#create {
    background: blue;
}
#delete {
    background: red;
}

甚至使用其他选择器：

#query_type li:nth-child(1) { background: .... }
#query_type li:nth-child(2) { background: .... }
#query_type li:nth-child(3) { background: .... }
#query_type li:nth-child(4) { background: .... }

只需选择你想要的选择器。

着色按钮css

2 个答案: