Блог

Главная - Вопросы по программированию - Как не применять CSS к определенному ТЕГУ

Как не применять CSS к определенному ТЕГУ

#html #css

#HTML #css

Вопрос:

Я не знаю, возможно ли это в 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. почему бы не создать стиль #special { background-color: blue; } — это сделало бы то, что вы хотите

2. спасибо aleks за ваше предложение

Ответ №1:

CSS3 позволяет :not() использовать селектор:

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

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

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

Комментарии:

1. Спасибо за ваше решение, только дополняющее, в моем случае я использовал: label:not(.radio){} где radio — это другой класс стиля. 😉

Ответ №2:

Решение CSS2

 div {
    color: red;
}

div#special {
    color: inherit;
}

демонстрация: http://jsfiddle.net/zRxWW/1 /

Ответ №3:

Решение CSS3:

 div:not(#special)

Комментарии:

1. круто! любое другое решение, кроме как в CSS 2? Спасибо, что уделили этому время!

2. Боюсь, что переопределение … css2 не имеет решения для этого. Вы всегда можете использовать решение GerManson, но я бы посчитал это также переопределяющим.

3. Указание стилей по идентификатору (которые переопределяют стили элементов) существует со времен CSS1

4. @GibboK — Что мешает вам использовать это? Типичное отсутствие поддержки IE?

5. У меня возникла некоторая проблема с IE, но я намеренно попросил learning предложить спасибо за ваш ответ.

Ответ №4:

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

Комментарии:

1. Потрясающее решение! Мощность CSS3 🙂 Мне очень помогла

Ответ №5:

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

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

… оставит все divs красными. Применяя 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 /