Question

我有点像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>

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;
}

主要的问题是，我不会改变'dottedLink'的'color'属性（只有'color'属性）而不改变'linkButton'的颜色属性。意思是，如果我改变一个类的颜色，另一个类的颜色也会自动改变。我在其他浏览器中测试了这个，它似乎只发生在firefox中，我不知道为什么。请帮忙，这太令人沮丧了

Answer 1

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

说明：请考虑此代码。

PIVOT

它将根据.dottedLink a, a:visited, a:active { color: #0099CC; text-decoration: none; border-bottom: 1px dotted; }选择a类下的.dottedLink代码，它会根据.dottedLink a和{{1}选择所有a代码}。因此，您不是仅定位所需类元素下的a:visited标记，而是定位所有a:visited标记。因此，上述样式适用于您网页中的所有a代码

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

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

解决方案：重构代码以定位特定的.linkButton a, a:active, a:visited { color: #FFFFFF; }代码，例如

和

请记住每个.dottedLink a, .dottedLink a:visited, .dottedLink a:active {分隔的选择器单独行动，并且不会像您想象的那样与其前面的选择器链接。

所以这个例子

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

相当于

希望你得到逻辑。

Answer 2

使用此，

.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，反之亦然。希望它有所帮助。

Answer 3

根据您的HTML格式以及CSS的方式，您可能会在链接上看到:visited颜色。即使您要更改<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时，您还要更改 ANY a:visited和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链接和控件上都有全局虚线边框，使它们都是单独的颜色。

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

3 个答案: