HTML中如何覆盖样式将外部链接viewCourseCatalogLinkText文本设为白色

你的样式不生效主要有两个原因：

• 浏览器对a标签默认设置了独立的样式，包括未访问、已访问、悬浮、激活四类状态的颜色，父元素的color属性不会自动继承到a标签，只针对父元素设置样式无法作用到链接文本
• 如果之前的页面样式存在更高优先级的规则（比如带!important的规则），普通的行内样式或者类选择器样式会被覆盖

你不需要修改原有HTML结构，直接用现有代码中已经存在的ultraCourseCatalogLink ID编写样式即可，ID选择器优先级远高于类选择器，适配性更强。将以下代码添加到页面的<style>标签中：

#ultraCourseCatalogLink a,
#ultraCourseCatalogLink a:link,
#ultraCourseCatalogLink a:visited,
#ultraCourseCatalogLink a:hover,
#ultraCourseCatalogLink a:active {
    color: #ffffff !important;
    /* 可选：去掉链接默认下划线 */
    text-decoration: none;
}

如果你要保留你新增的p标签写法，需要直接针对p标签下的a标签设置样式，修改你的样式代码如下即可：

p.announcement-text a,
p.announcement-text a:link,
p.announcement-text a:visited,
p.announcement-text a:hover,
p.announcement-text a:active {
    color: #ffffff !important;
}

内容的提问来源于stack exchange，提问作者leaner122