css - CSS-分组选择器和伪类

我有很多要分组的选择器，可以通过以下方式轻松完成：

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

我也想对它们应用伪类。

但是有没有一种方法可以对多个选择器和多个伪类进行分组而不重复我自己呢？

即。我希望以上所有元素在链接，悬停和活动状态下都具有相同的样式。
我必须这样做吗？

.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的情况，上面列出的ID之一是父级和子级。例如。 class1 > id1

因此，要创建一种反映所有场景的样式，我必须代表所有场景并将其分组。我希望有一种方法可以至少将伪类分别分组，这样我就不必为每个链接状态创建3倍数量的元素。

最佳答案

作为一个普遍的答案：是的，您必须这样做。没有更好的办法。因为您的元素有不同的父母。

但是请考虑以下标记：

<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

关于css - CSS-分组选择器和伪类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17924161/