CSS - 分组选择器和伪类答案

【问题标题】：CSS - Grouping Selectors AND pseudo classesCSS - 分组选择器和伪类
【发布时间】：2017-04-18 12:05:37
【问题描述】：

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

.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 并且上面列出的 id 之一是 parent 和 child。例如。 class1 > id1

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

【问题讨论】：

由于您的元素 ID 应该是唯一的，因此没有理由在选择器中包含父类。如果 .class1 #id1 选择的元素与 #id1 不同，则说明您做错了。这本身会大大缩短您的选择器。
这通常是相关的，但我将其用作条件，因为父级更改了它的类名（使用 php），所以我不希望样式在它不适用时应用'不匹配那个特定的父类。你跟着？

标签： css syntax grouping css-selectors pseudo-class

【解决方案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

【讨论】：

是的，我的错。 @MrLister

【解决方案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 {}

【讨论】：