Question

我有这个

/* unvisited link */
a.underl:link {
    color: #000000;
    text-decoration: none;
}

/* visited link */
a.underl:visited {
    color: #000000;
    text-decoration: none;
}

/* mouse over link */
a.underl:hover {
    color: #ff6213;
    text-decoration: underline;
}

/* selected link */
a.underl:active {
    color: #ff0003;
    text-decoration: underline;
}

我想要做的是定义另一个类underl2，但不同之处在于我只更改了link的颜色。所有其他保持不变。如何在不复制和粘贴其他内容并将其重命名为a.underl2的情况下执行此操作？

Answer 1

这是CSS的（许多）弱点之一：您不能说“继承此规则，然后稍微更改它”。您可以在Less，Sass和类似的CSS扩展程序/预处理程序中使用，但不能使用CSS本身。

在纯CSS环境中，如果有一些结构方法可以识别想要拥有新类的元素，则可以在这些规则下面定义具有新颜色的规则（如果具有相同的特异性，它会取代它们）。例如，如果您希望a.underl上的新颜色是.foo的后代：

.foo a.underl {
    color: theNewColor;
}

如果你不能在结构上做到这一点，那么你最接近的就是使用类（再次在这些规则下）在新规则中定义颜色，并将该类添加到相关元素。

Answer 2

添加类似已接受答案的类是一种解决方案，如果您不想更改大量CSS，可能是最快的，但如果您需要.underl2很多，我会更改CSS。

a.underl, a.underl2 {
    text-decoration: none
}

a.underl:link, a.underl:visited, a.underl2:visited {
    color: #000
}

a.underl2:link {
    color: #ccc
}

a.underl:hover, a.underl:active, a.underl2:hover, a.underl2:active {
    text-decoration: underline
}

a.underl:hover, a.underl2:hover {
    color: #ff6213
}

a.underl:active, a.underl2:active {
    color: #ff0003
}

Answer 3

或者......你可以这样做：

/* unvisited link */
a.underl:link {
    color: #000000;
    text-decoration: none;
}

a.underl2:link {
    color: red;
    text-decoration: none;
}

/* visited link */
a.underl:visited, a.underl2:visited{
    color: #000000;
    text-decoration: none;
}

/* mouse over link */
a.underl:hover, a.underl2:hover{
    color: #ff6213;
    text-decoration: underline;
}

/* selected link */
a.underl:active, a.underl2:active{
    color: #ff0003;
    text-decoration: underline;
}

编写更少的代码

3 个答案: