html - 基本 CSS 问题，属性在多个类中发生变化？

Question

我是 CSS 的新手，目前正用头撞 table 试图弄清楚我的代码有什么问题。HTML:

<div id="loginForm">
    <span class="dottedLink"><a href="resetlogin">Recover login details</a></span><br>
    <span class="dottedLink"><a href="signup">Create an account</a></span> 
</div>
<div id="mainpageSplashImage"></div><br>   
<div id="titleDesciption">This is the Title</div>  
<div id="registerButtonPlacement"><a href="signup" class="linkButton">Register</a></div>

CSS:

.dottedLink {
    font-family: sans-serif;
    font-size: .9em;
}
.dottedLink a, a:visited, a:active {
    color: #0099CC;
    text-decoration: none;
    border-bottom: 1px dotted;
}
.dottedLink a:hover {
    text-decoration: none;
    border: none;
    color: #990000;
}
.linkButton { 
    background: #CC0000;
    border: 1px solid #888888;
    padding: 5px;
    color: #FFF;
    font-size: 1em;
    cursor: pointer;
    font-family: sans-serif; 
    text-align: center;
    text-decoration: none;
    border-bottom: none;
}
.linkButton a, a:active, a:visited {
    color: #FFFFFF;
}
.linkButton:hover { 
    background: #FFFFFF;
    border: 1px solid #888888;
    padding: 5px;
    color: #CC0000;
    font-size: 1em;
    cursor: pointer; 
    text-decoration: none;
}

主要问题是，我无法在不更改“linkBut​​ton”的颜色属性的情况下更改“dottedLink”的“颜色”属性(并且只能更改“颜色”属性)。意思是，如果我改变一个类的颜色，另一个类的颜色也会自动改变。我已经在其他浏览器中测试过，它似乎只发生在 firefox 中，我不知道为什么。请帮忙，这太令人沮丧了

Answer 1

问题:您认为它的工作方式...

解释:考虑这段代码。

.dottedLink a, a:visited, a:active {
    color: #0099CC;
    text-decoration: none;
    border-bottom: 1px dotted;
}

它将根据.dottedLink a选择.dottedLink类下的a标签，它选择所有的a 标签根据 a:visited 和 a:visited。因此，您不是只针对所需类元素下的 a 标签，而是针对所有 a 标签。因此，上述样式适用于页面中的所有 a 标记

继续这个问题。你有这个代码

.linkButton a, a:active, a:visited {
    color: #FFFFFF;
}

同样的情况.. 选择所有 a 标签并应用该样式。

解决方案: 是重构您的代码以针对特定的 a 标记，例如

.dottedLink a, .dottedLink a:visited, .dottedLink a:active {

和

  .linkButton a, .linkButton a:active, .linkButton a:visited {

记住每个 , 分隔的选择器独立运行，并不像您想象的那样与其前面的选择器链接。

所以这个例子

.linkButton a, a:active, a:visited {
        color: #FFFFFF;
    }

相当于

.linkButton a {
  color: #FFFFFF;
}
a:active{
  color: #FFFFFF;
}
.a:visited {
  color: #FFFFFF;
}

希望你明白逻辑。