Каждый h2 кроме тех, у которых нет класса?

Question

Мне интересно, как я могу применить стиль к КАЖДОМУ h2, к которому ЛЮБОЙ класс прикреплен, таким образом, эффект не будет применен к простому h2..eg ..

<h2 class="1"></h2>
<h2 class="2"></h2>
<h2 class="3"></h2>
<h2 class="a"></h2>
<h2></h2>

У всех, у кого есть класс, должен быть стиль - и просто не должно быть h2 (это огромный сайт с сотнями стилей) ... так есть ли простой способ сделать это?

Answer 1

Есть способ сделать это, но это возможно только в браузерах, которые поддерживают CSS3: не псевдокласс.

h2[class] {
    /* Styles for <h2> with a class, regardless of the value */
}
h2:not([class]) {
    /* Styles for <h2> without classes */
}

Я надеюсь, что это работает!

[Редактировать] Я сделал для вас простое демо - http://jsfiddle.net/fL2sT/

Answer 2

То, что вы спрашиваете, - это то, как CSS работает по умолчанию.

Правильный способ стилизации элементов, которым не назначен определенный класс, - это стилизация базового элемента, как продемонстрировал Ахсан выше.Я не знаю, почему за него проголосовали.

h2 { property: value; }

Обратите внимание, что если элементам H2 назначены классы, тогда этот стиль может переопределить ваш базовый стиль.

Так что если у вас есть: h2 { color:#333; font-size:2em; } в качестве базового стиля, а затем примените к нему class="myClass", где: .class { color: #000; }, тогда цвет базового стиля будет переопределен (но не размер шрифта).Это каскад в каскадных таблицах стилей.

Другой способ заключается в их условном назначении:

div#nav h2:first-child { property:value; }

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

Answer 3

Почему бы просто не использовать

h2[class] { ... }