Wordpress链接悬停颜色[重复]答案

【问题标题】：Wordpress link hover colors [duplicate]Wordpress链接悬停颜色[重复]
【发布时间】：2017-07-14 05:31:19
【问题描述】：

这是我在<style> 中的 css：

a {
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
  outline: none;
  color: #161616;
  text-decoration: none;
}
a:hover, a:focus {
  color: #D6D6D6;
  outline: none;
  text-decoration: none;
}

然后我的链接是黑色的，悬停时是灰色的。但是当我像这样在entry content a 中添加颜色时：

.entry-content a {
    color: #E5C9CC;
}

然后我的链接只是粉红色的，没有灰色悬停不知道为什么。

我不希望我博客上的所有链接都是粉红色的，只有我条目中的链接需要是粉红色并带有灰色悬停。

【问题讨论】：

看看css的特异性，你的问题是你的低级风格比悬停风格更具体，所以它会覆盖它。您要么必须将 !important 添加到悬停中（我建议不要这样做，除非您希望它适用于所有链接）或为 .entry-content a 的悬停添加一个条目

标签： css wordpress hyperlink colors hover

【解决方案1】：

试试这个：

a {
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
  outline: none;
  color: #161616;
  text-decoration: none;
}
 .entry-content a {
    color: #E5C9CC;
 }

a:hover, a:focus, .entry-content a:hover, .entry-content a:focus {
  color: #D6D6D6;
  outline: none;
  text-decoration: none;
}

选择器的顺序和具体程度非常重要。如果您指定悬停样式也适用于entry-content，它将起作用

【讨论】：

【解决方案2】：

试试这个

.entry-content a {
    color: #E5C9CC;
}

a {
  transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
  outline: none;
  color: #161616;
  text-decoration: none;
}

a:hover, a:focus {
  color: #D6D6D6;
  outline: none;
  text-decoration: none;
}

<a href="#">Link #1</a><br />
<a href="#">Link #2</a>
<div class="entry-content">
	<a href="#">Link into div</a>
</div>

【讨论】：

【解决方案3】：

也许，像这样

.entry-content a {
     color: #161616;
}
.entry-content a:hover {
    color: #D6D6D6;
}

【讨论】：