0

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

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

而且我还想对它们应用伪类。

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

IE。我希望上述所有元素，无论是 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>

但是 class NAV，实际上是一个可互换的类名，使用<?php echo $current ?>

所以我的 CSS 反映了一个场景，其中 NAV 是class1, class2, class3OR class4& 上面列出的 id 之一是 parent 和 child。例如。class1 > id1

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

4

2 回答 2

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

于 2013-07-29T14:37:35.417 回答
0

你可以给受影响的元素一个他们自己的独特的类。

<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 {}
于 2013-07-29T14:51:56.370 回答