Html 基本CSS问题，属性在多个类中更改？

我是一个CSS新手，目前正试图找出我的代码出了什么问题。 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>

主要问题是，如果不同时更改'linkButton'的颜色属性，我无法更改'dottedLink'的'color'属性（仅更改'color'属性）。也就是说，如果我改变一个类的颜色，另一个类的颜色也会自动改变。我已经在其他浏览器上测试过了，但这似乎只发生在firefox上，我不知道为什么。请帮忙，这太令人沮丧了使用这个

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

而不是

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

---

对

.linkButton

执行相同的操作。现在，

.dottedLink

上的任何更改都不会影响

.linkButton

，反之亦然。希望有帮助。

以html的方式和CSS的方式，您可能会在链接上看到

：已访问的
颜色。即使要更改
的颜色，链接也有自己的颜色，这将覆盖span（因为它是span的子项）

解决此问题的方法是指定链接的颜色，而不是跨度。您可以使用
>
CSS选择器来完成此操作。也可以通过分离特定的元素

你的台词是：

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

从这个角度看可能更有意义：

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

这应该告诉您，当您更改
.dottedLink a
时，您也在更改任何
a:visted
和
a:active

更改
.dottedLink A
颜色的更好方法是将其从该块中分离出来

.dottedLink a, a:visited, a:active {
    text-decoration: none;
    border-bottom: 1px dotted;
}
.dottedLink > a { /*This greater-than symbol means 'the direct child of' */
    color:#000000; /*Whatever color*/
}
a:visited, a:active {
    color: #0099CC;
}

现在，您在所有
a
链接上都有了全局虚线边框，并且有了使它们都具有单独颜色的控件。
问题：您认为它的工作方式

解释：考虑这个代码。

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

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

继续这个问题。你有这个密码吗

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

这也是同样的情况。。选择所有
a
标记并应用该样式

解决方案：是将代码重构为特定的
a
标记，如

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

及

请记住每个
，
分离的选择器都独立工作，并且不像您所想的那样与其前面的选择器链接

所以这个例子

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

相当于

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

希望您能理解逻辑。
您可以从css中的
.dottedLink
类中删除
a
标记，也许这可以解决问题：它会变成什么颜色？它可能已经被“访问”了。在您的行
.linkButton a、a:active、a:visited
中，逗号分隔了几个不同的元素。其中一个是
a：已访问
。这可能是您在任何已访问的链接上看到的颜色语义上，在链接本身而不是其容器上设置这些类可能更有用。
.linkButton a, a:active, a:visited {
        color: #FFFFFF;
    }

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