CSS не изменит существующие свойства класса

Предположим, я литий стиле следующим образом:CSS не изменит существующие свойства класса

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

<li class="app1">

Теперь предположим, что у меня такая же литий снова появится на странице, но я хочу измените цвет рамки на лоток, добавив класс в существующий класс, не измените цвет.

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

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

Что я делаю неправильно? Благодаря

Я положил его на jsfiddle http://jsfiddle.net/noscirre/JtVGp/24/

источник

2012-06-14 user1038814

.app-inactive-border меньше specific затем #app-container ul.apps li.app1

Там, где несколько наборов правил содержит правила, которые изменяют то же свойство, самые конкретные правила посаженные побед.

Использование #app-container ul.apps li.app1.app-inactive-border

источник

2012-06-14 14:02:43 Quentin

Я не уверен в этом, поэтому я не представляю в качестве ответа, но не отмечал бы это как важное переопределение других правил? * РЕДАКТИРОВАТЬ * мой плохой, просто прочитайте другой ответ, и он упоминает важные – Tony318

Это было бы, но '! Important' является злым. Это молот с одним выстрелом, который, как правило, позволяет вам использовать более специфический селектор * и *, важный позже. – Quentin

ладно спасибо за ответ. Я не использовал! Важно вообще, у меня просто есть общее представление о том, для чего оно предназначено. Похоже, что это не лучшая практика. Спасибо за объяснение. – Tony318

другой способ сделать это:

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

его Жюст, чтобы знать, что роль "важно!". , но ответ Квентина - это лучший и более читаемый синтаксис.

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

источник

2012-06-14 14:23:01 Mouloud

CSS не изменит существующие свойства класса

ответ

Смежные вопросы