Как не применять CSS для определенной TAG

Я не знаю, возможно ли в CSS, но я бы хотел, чтобы общая роль не применима к определенному элементу в моем случае id=special. В моем примере все DIV должны быть красными, но я хочу, чтобы id=special не применял этот цвет. Я понимаю, что всегда могу переписать элемент id=special, но мне интересно узнать, возможно ли какое-то исключение из общей роли.

Любая идея в CSS 2 и CSS 3?

Пример:

<div>this is red</div>
<div>this is red</div>
<div id="special">this one must be blus</div>
div>this is red</div>

// My General Role
div
{
  background-color:Red;
}

Ответы

Ответ 1

Решение CSS2

div {
    color: red;
}

div#special {
    color: inherit;
}

demo: http://jsfiddle.net/zRxWW/1/

Ответ 2

CSS3 разрешает селектор :not():

div:not([id])
-or-
div:not(#special)
depending on what you want to exclude

Вы можете прочитать все о селекторах в документах w3c.

Что касается CSS2, существует ограниченный набор селекторов, и они не учитывают отрицание.

Ответ 3

Решение CSS3:

div:not(#special)

Ответ 4

Вы хотели бы использовать div:not(#special), но если он будет синим в любом случае, вы можете просто переопределить это правило. Селектор :not() является свойством CSS3 и, следовательно, не поддерживается всеми браузерами.

Ответ 5

Это отличный пример того, как работает CSS-специфика. Общее правило, применяемое ко всем элементам определенного типа (ваше правило div, превращающее задний фон) заменяется более конкретным правилом, применяемым к идентификатору. Эта концепция существует со времен CSS1 и доступна во всех браузерах. Таким образом:

div {
  background-color:red;
}
#special {
 background-color: blue;  
}

... оставит все divs красным. Применяя id special к div, этот div будет синим вместо.

Смотрите в действии: http://jsfiddle.net/9Hyas/

Ознакомьтесь с этими статьями, чтобы узнать больше о CSS-специфичности: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ и http://www.htmldog.com/guides/cssadvanced/specificity/