如何更改使用css类的链接的字体颜色？

-1

我正在尝试更改头类中链接的字体颜色。我尝试使用下面的代码，但它影响了页面上的所有链接。我尝试了不同的安排，似乎无法找出正确的方法。如何更改使用css类的链接的字体颜色？

CSS代码

#amp-wp-header a:active, a:visited { 
    color:#ffffff; 
} 
a:hover, a:focus { 
    color:#ffffff; 
}

HTML代码

<header id="#top" class="amp-wp-header"> 
    <div> 
    <a href="http://example.com">Title </a> 
    </div> 
</header>

来源

2017-01-02 Eric

将您的页面ID包含在您的CSS选择器中 –

您在CSS中使用过''amp-wp-header'''，但在您的标记中''amp-wp-header'''是一个类使用'''.amp-wp-header'''。 – aavrug

类以CSS中的（。）开头，而ids以（＃）开头，您在上面的代码中混淆了这两个类。 – 2017-01-02 06:30:18

如果你不关心具体的链路状态，简单地做：

.amp-wp-header a { 
    color:#ffffff; 
}

与问题你的做法是， mma分隔符用于指示单独的选择器。

当你这样做：

.amp-wp-header a:active, a:visited { 
    color:#ffffff; 
}

你说：

指定这个颜色给所有a:active elements下.amp-wp-header
这种颜色分配给所有a:visited elements（这一个标签在整个文档）

来源

2017-01-02 06:30:14

试试看这个代码，

<header id="#top" class="amp-wp-header"> 
    <div class="spl-for-link"> 
    <a href="http://example.com"> 
    Title </a> 
    </div> 
    </header> 

    .spl-for-link a 
    { 
    color:#ffffff; 

    } 

    .spl-for-link a:hover,a:focus 
    { 
    color:#ffffff; 
    }

来源

2017-01-02 06:30:35 user7357089

但是'.spl-for-link a'规则会将格式应用于'.spl-for-link'中任何**状态的链接。在第二条规则中，“spl-for-link a：hover”将不会执行任何操作，因为上面的规则中已经设置了颜色，并且'a：focus'部分将样式应用于任何**重点关联文档中的任何位置。 – 2017-01-02 06:51:27

你是否改变了spl-for-link的颜色：悬停，并且重要的颜色来覆盖CSS。 – user7357089

#amp-wp-header a:active, #amp-wp-header a:visited{color:#ffffff;} 
#amp-wp-header a:hover,#amp-wp-header a:focus{color:#ffffff;}

来源

2017-01-02 06:30:46

当然，但为什么我会把它写成两条单独的规则呢？ – 2017-01-02 06:49:26

首先使用的是＃这是ID不上课。

使用这样的事情：

.amp-wp-header > div a{ 
color: #fff; 
}

来源

2017-01-02 06:30:51 Shashi

但是，即使链接处于非活动状态，访问过程，悬停状态或集中状态，这也会应用颜色。 – 2017-01-02 06:40:53

@torazaburo你是对的，但我只是解释它可以被目标休息的方式应该被相应地处理。 – Shashi

试试这个：

header.amp-wp-header a:active, 
header.amp-wp-header a:visited, 
header.amp-wp-header a:hover, 
header.amp-wp-header a:focus { 
    color:#ffffff 
}

来源

2017-01-02 06:34:33 Saeed

通常认为最好的做法是**不**指定'header.amp-wp-header'中的标签和类，因为如果代码决定为头元素使用不同的标签或者使用不同的标签该类别的其他元素。 – 2017-01-02 07:08:50

，但它影响了网页上的所有链接。

#amp-wp-header a:active,a:visited{color:#ffffff;}a:hover,a:focus{color:#ffffff;}

如果重新格式化这个（并更改#到.指定一个类），你会得到

.amp-wp-header a:active,a:visited{color:#ffffff;} 
a:hover,a:focus{color:#ffffff;}

，您可以在第二个规则，你是清楚地看到，将颜色应用于全部盘旋或集中链接。

换句话说，第一个{color:#ffffff}终止规则。从a:hover开始的以下部分被解释为一个全新的独立规则。它不受.amp-wp-header的影响，仅仅因为它碰巧在同一条线上。

所以，你可能会认为解决办法是重写你的CSS作为一个规则，让更高级别的选择适用于所有伪类国家：

.amp-wp-header a:active, a:visited, a:hover, a:focus {color: #ffffff;}

然而，这并不工作，因为.amp-wp-header只适用于a:active。 “选择器组”中的每个成员，有时称为“选择器列表”，用逗号分隔的选择器列表完全是独立。换句话说，上面是完全等同于

.amp-wp-header a:active {color: #ffffff;} 
a:visited {color: #ffffff;} 
a:hover {color: #ffffff;} 
a:focus {color: #ffffff;}

将样式应用到所有参观，徘徊，或集中环节，而不仅仅是内部.amp-wp-header。因此，你需要把它写成

.amp-wp-header a:active {color:#ffffff;} 
.amp-wp-header a:visited {color:#ffffff;} 
.amp-wp-header a:hover {color:#ffffff;} 
.amp-wp-header a:focus {color:#ffffff;}

对于这相当于是

.amp-wp-header a:active, 
.amp-wp-header a:visited, 
.amp-wp-header a:hover, 
.amp-wp-header a:focus { 
    color: #ffffff; 
}

注意，在未来的浏览器，你将能够使用:matches如下：

.amp-wp-header a:matches(:active, :visited, :hover, :focus) { 
    color: #ffffff; 
}

更多详情请参阅MDN page。有关兼容性，请参阅this chart。目前，您需要使用供应商前缀版本，例如-webkit-any或-moz-any，这使得它不太吸引人。

除了理解选择器和选择器组的工作方式外，这里的一个教训是仔细格式化和缩进CSS，以帮助您（和其他人）了解它的含义。

来源

2017-01-02 06:36:04

如何更改使用css类的链接的字体颜色？

回答

相关问题