Question

绝对简单，是吗？

不，不是真的：以下内容（据我所知）应该可以在CSS中的一个id下为我提供多个href类选择器，但不起作用（第一个代码块为默认代码，然后是该代码块，在这种情况下，另一个班级）：

#layoutA a:link {
    color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA a:visited {
    color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA a:hover {
    color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA a:active {
    color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA a:focus {
    color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}



#layoutA .class1 a:link {
    color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA .class1 a:visited {
    color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA .class1 a:hover {
    color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA .class1 a:active {
    color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA .class1 a:focus {
    color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}

...所以我需要知道在CSS中是否确实可行（如果可以，怎么办？），或者我是否应该继续为需要使用不同配色方案进行样式设置的每个href链接继续使用不同的ID？

Answer 1

根据您的结构，您的代码有效。

根据CSS，您要用class1设置样式的任何链接都必须与该类一起包装在包装器中。

但是，如果您要为链接本身提供类，我将提供一组样式作为class2，以提供有关如何正确执行此操作的示例。

#layoutA a:link {
    color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA a:visited {
    color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA a:hover {
    color: green; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA a:active {
    color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA a:focus {
    color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}



#layoutA .class1 a:link {
    color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA .class1 a:visited {
    color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA .class1 a:hover {
    color: black; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA .class1 a:active {
    color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA .class1 a:focus {
    color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA a.class2:link {
    color: black; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA a.class2:visited {
    color: red; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA a.class2:hover {
    color: green; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA a.class2 a:active {
    color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}

#layoutA a.class2:focus {
    color: hotpink; font-family: verdana, arial, sans-serif; text-decoration: none;
}

<div id="layoutA">
    <a href="#">This is styled by the first set</a>
    <div class="class1"><a href="#">This is styled by class1</a></div>
    <a class="class2" href="#">This is styled by Class2</a>
</div>

如何在CSS中的一个ID下具有多个href类选择器？

1 个答案: