css类不会更改现有的类属性

Question

假设我的风格如下：

#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少于specific，然后#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”的作用是什么。 但Quentin的答案是最佳实践，语法更具可读性。

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