CSS — группировка селекторов и псевдоклассов

У меня есть куча селекторов, которые я хочу сгруппировать, что легко сделать следующим образом:

.class1 #id1, .class2 #id2, .class3 #id3 { }

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

Но есть ли способ сгруппировать несколько селекторов И несколько псевдоклассов, не повторяясь?

т.е. Я хотел бы, чтобы все вышеперечисленные элементы в состояниях Link, Hover и Active имели одинаковый стиль. Должен ли я сделать это так?

.class1 #id1:link, .class2 #id2:link, .class3 #id3:link, .class1 #id1:hover, .class2 #id2:hover, .class3 #id3:hover, .class1 #id1:active, .class2 #id2:active, .class3 #id3:active {}

или есть лучший способ?

РЕДАКТИРОВАТЬ:

Я хотел бы уточнить свою позицию. У меня есть список ссылок, организованный примерно так:

<div class="NAV">
 <a id="id1"></div>
 <a id="id2"></div>
 <a id="id3"></div>
 <a id="id4"></div>
</div>

но класс NAV на самом деле является взаимозаменяемым именем класса с использованием <?php echo $current ?>

Таким образом, мой CSS отражает сценарий, в котором NAV равен class1, class2, class3 ИЛИ class4, а один из перечисленных выше идентификаторов является родительским и дочерним. например. class1 > id1

Таким образом, чтобы создать один стиль, отражающий все сценарии, я должен представить ВСЕ сценарии и сгруппировать их. Я надеялся, что есть способ, по крайней мере, сгруппировать псевдоклассы отдельно, поэтому мне не нужно создавать в 3 раза больше элементов для каждого состояния ссылки.


css syntax css-selectors grouping pseudo-class
person toms    schedule 29.07.2013    source источник
comment
Поскольку идентификаторы ваших элементов должны быть уникальными, нет причин включать родительский класс в селектор. Если .class1 #id1 выбирает другой элемент, а не только #id1, вы сделали что-то не так. Это само по себе немного укорачивает ваш селектор.   -  person L_Holcombe    schedule 29.07.2013
comment
Обычно это имеет значение, но я использую его как условие, поскольку родитель меняет имя своего класса (используя php), и поэтому я не хочу, чтобы стиль применялся, когда он не соответствует этому конкретному родительскому классу. Ты следишь?   -  person toms    schedule 01.08.2013

Ответы (2)


arrow_upward
1
arrow_downward

Общий ответ: Да, вы должны это сделать. Нет лучшего способа. потому что у ваших элементов разные родители.

Но рассмотрим разметку ниже:

<div class="class1">
    <div id="id1">
        <div class="some-div"></div>
    </div>
    <div id="id2">
        <div class="some-div"></div>
    </div>
    <div id="id3">
        <div class="some-div"></div>
    </div>
</div>

В этом случае вы можете выбрать такие элементы:

.class1 > div:hover {
    // your css rule...
}

И не влияет на div с классом some-div

person Nojan    schedule 29.07.2013
comment
Да, мой плохой. @Мистер Листер - person Nojan; 29.07.2013

arrow_upward
0
arrow_downward

Вы можете присвоить затронутым элементам собственный уникальный класс.

<div class="class1">
   <a id="id1" class="hoverable">xxx</a>
</div>
<div class="class2">
   <a id="id3" class="hoverable">xxx</a>
</div>
<div class="class3">
   <a id="id3" class="hoverable">xxx</a>
</div>

Тогда все, что вам нужно для CSS, это

.hoverable:link, .hoverable:hover, .hoverable:active {}
person Mr Lister    schedule 29.07.2013