着色按鈕css

Question

我有一個包含4個按鈕的列表，每個按鈕屬於同一類，每個按鈕都有自己的ID。 我希望4個按鈕的形狀和大小相同但顏色不同。 （字母CRUD稍后將替換為更合適的字母）

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

ID比類更具體，因此您只能使用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> 

參考： 計算選擇器的特異性

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: .... }

它只是選擇你想要的選擇器。