想不通基本CSS

-1

所以我被安排以這種方式幾個按鈕：想不通基本CSS

<button>Home</button> 
<button>Blog</button> 
<button>Forums</button> 
<button>Contact Us</button>

我想有改變選擇按鈕的背景「選擇了」類或ID。我試着這樣做：在HTML

button > .selected { 
    background: red !important; 
}

，改變了按鈕，這樣的：

<button class="selected">Home</button>

它沒有做任何事情，按鈕的背景保持不變顏色。我也嘗試使用ID而不是類沒有用。

我該如何輕鬆解決這個問題？

*「'''''''''''''''''''''''button'選擇'button'元素由'button.selected'表示。 '''做一些你根本不想要的東西。 – deceze

這真的是CSS的基礎知識。如果你是谷歌，你會在5秒內找到答案。 – Vucko

雖然我明白這個問題本可以通過更深入的研究來解決，但我認爲它不應該被遺忘，因爲它在技術上是完整和清晰的。 –

用途：

button.selected { 
    background: red !important; 
}

對於一個按鈕與類（確保有他們之間沒有空格，否則你會被選擇的子元素）

你也應該能夠去除!important除非實際上有一個很好的理由保持它。由於包含類的選擇器比標準選擇器更具體，因此它將覆蓋背景色而不使用!important。

>符號表示元素的直接子元素。

下面的幾個beginers資源傾斜約CSS選擇：

2016-06-10 08:48:39 DBS

你爲什麼建議保留'！important'？ –

@NicoO我不會親自使用它，但我只是在糾正選擇器，我假設背後有更多的推理，而不是問題中所示。 – DBS

嘗試這些代碼，它將工作

button{ 
    background:green; 
} 

button.selected { 
    background:red; 
}

2016-06-10 08:55:08 Maharajan

這對這個問題有什麼幫助？ – dakab

你能重複這個問題嗎？ – Maharajan

button:active,button:focus { 
 
background:red; 
 
}

<button>Home</button> 
 
<button>Blog</button> 
 
<button>Forums</button> 
 
<button>Contact Us</button>

2016-06-10 08:57:41 Saika

回答