html - css 类不会改变现有的类属性

Question

假设我有一个 li 样式如下：

#app-container ul.apps li.app1 {
   border-color:#57b6dd;
   background:url(app-icons/app1.png) no-repeat 10px 10px;
}

<li class="app1">

现在假设我在页面中再次出现了相同的 li，但我想将边框颜色更改为托盘，向现有类添加一个类不会改变颜色。

.app-inactive-border { 
   border-color: #666666;
}

<li class="app1 app-inactive-border">

我究竟做错了什么？谢谢

我已经把它放在了 jsfiddle http://jsfiddle.net/noscirre/JtVGp/24/

Answer 1

.app-inactive-border那么具体_#app-container ul.apps li.app1

在多个规则集提供更改相同属性的规则的情况下，最具体的规则集获胜。

采用#app-container ul.apps li.app1.app-inactive-border

Answer 2

另一种方法是这样做：

.app-inactive-border { border-color: #666666!important; }

知道“！important”的作用是什么。但昆汀的回答是一种最佳实践，语法更易读。

last thing : you can simplify the hexa color code like this #666;