Question

为了进一步削减我的CSS，我需要知道如何为每个链接，访问，悬停和活动的一行中的多个类中的链接设置样式（除非有更好的方法）

<div class="div1"><a href="">Some words</a></div>
<div class="div2"><a href="">Some words</a></div>
<div class="div3"><a href="">Some words</a></div>

下面是我认为可行的css，但只是第一列的'.div1'，而.div2和.div3被忽略

.div1 a:link, div2 a:link, div3 a:link {
    color: red;
}
.div1 a:visited, div2 a:visited, div3 a:visited {
    color: red;
}
.div1 a:hover, div2 a:hover, div3 a:hover {
    color: blue;
}
.div1 a:active, div2 a:active, div3 a:active {
    color: blue;
}

Answer 1

它不起作用的原因是因为你的css中其他div的开头没有点。

为了简化操作，如果您希望跨多个元素使用相同的样式，请创建一个对每个元素都相同的类：

<div class="div1 new"><a href="">Some words</a></div>
<div class="div2 new"><a href="">Some words</a></div>
<div class="div3 new"><a href="">Some words</a></div>


.new a:link, .new a:visited {
    color: red;
}
.new a:hover, .new a:active {
    color: blue;
}

如果你不需要单独引用div，那么你可能不需要div1，div2，div3类。如果你确实需要，那么他们可能会更好地作为身份证。

Answer 2

您忘记了div2和div3之前的点。

选中此JSFiddle

Answer 3

我建议你更好地组织你的标记。我假设您不希望全局应用这些样式，因此我建议将它们放入语义容器中：

<aside>
 <div class="div1"><a href="">Some words</a></div>
 <div class="div2"><a href="">Some words</a></div>
 <div class="div3"><a href="">Some words</a></div>
</aside>

现在你可以像这样使用你的风格：

aside a:link, aside a:visited {
    color: red;
}

aside a:hover, aside a:active {
    color: blue;
}

多类样式链接

3 个答案: