Question

我有一堆我想要分组的选择器，这很容易就这样做了：

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

我还想对它们应用psuedo类。

但是有没有办法将多个选择器和多个伪类分组而不重复自己？

即。我想在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反映了资产净值为class1，class2，class3或class4＆amp;上面列出的其中一个ID是父母和孩子。例如。 class1 > id1

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

Answer 1

作为一般答案：是的，你必须这样做。没有更好的方法。因为你的元素有不同的父母。

但请考虑以下标记：

<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产生影响

Answer 2

您可以为受影响的元素提供他们自己的唯一类。

<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 {}

CSS - 分组选择器和伪类

2 个答案: