无法弄清楚基本的CSS [重复]答案

【问题标题】：Can't figure out basic CSS [duplicate]无法弄清楚基本的CSS [重复]
【发布时间】：2016-06-10 16:59:43
【问题描述】：

所以我有几个按这种方式排列的按钮：

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

我想要一个“选定”类或 ID 来更改选定按钮的背景。我试过这样做：

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

并将 HTML 中的按钮更改为：

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

它根本没有做任何事情，按钮背景保持相同的颜色。我也试过用 ID 代替 class 也无济于事。

我怎样才能轻松解决这个任务？

【问题讨论】：

标签： css

【解决方案1】：

用途：

button.selected {
    background: red !important;
}

对于带有类的按钮（确保它们之间没有空格，否则您将选择子元素）

您还应该能够删除!important，除非确实有充分的理由保留它。由于包含类的选择器比标准选择器更具体，它会覆盖背景颜色而不使用!important。

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

这里有一些关于 CSS 选择器的初学者资源：

【讨论】：

【解决方案2】：

试试这些代码，它会起作用的

button{
    background:green;
}

button.selected {
    background:red;
}

【讨论】：

【解决方案3】：

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

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

【讨论】：