如何在某些页面上设置不同的 h4 和 a:hover答案

【问题标题】：How to set different h4 and a:hover on certain pages如何在某些页面上设置不同的 h4 和 a:hover
【发布时间】：2018-12-20 16:03:34
【问题描述】：

所以网站在鼠标悬停时使用文本下划线，但在一个页面上，我必须将鼠标悬停设置为仅颜色变化，没有下划线装饰。

<div class="hcolor">
 <a href="#"><h4>Custom Text</h4></a>
</div>

在 CSS 中我尝试过：

.hcolor h4 a:hover{
 color: #fff;
 text-decoration:none;
 }

但这不起作用，因为标准设置仍然会覆盖这些设置，并且链接不断加下划线。

【问题讨论】：

CSS 层叠顺序如下：浏览器默认、外部样式表、内部样式表（在头部）、内联样式（在 HTML 元素内），所以要确保你影响的是正确的用你的 CSS 元素，试着把它放在页面的头部作为测试。

标签： html css

【解决方案1】：

CSS 通常从父元素向下传递到子元素。你的css会去.hcolor类的元素，然后去看看元素h4，然后在那个元素中它会去看看一个孩子a超链接，现在当你把鼠标悬停在它上面时.将应用 CSS。

但由于没有与此匹配的树，您需要更改 HTML 或 CSS。

<div class="hcolor">
 <h4>
  <a href="#">Custom Text</a>
 </h4>
</div>

因此，要么将您的 HTML 更改为上述 HTML，要么将您的 CSS 更改为：

.hcolor a h4:hover {
  color: #fff;
  text-decoration:none;
}

【讨论】：

【解决方案2】：

试试这个：

.hcolor a:hover h4 {
  color: #fff !important;
  text-decoration:none !important;
}

【讨论】：

【解决方案3】：

确保您的 CSS 声明优先于模板中已指定的声明。由于只有一个页面必须包含此更改，因此请继续指定最好的 CSS。

例子

div.hcolor a:hover h4 {
    color: #fff;
    text-decoration:none;
}

否则，可能存在具有优先级的模板 CSS。使用 Inspect Element 检查正在应用的 CSS 规则。

【讨论】：

【解决方案4】：

试试这个：

代码

<div class="hcolor">
<h4> <a href="#">Custom Text</a></h4>
</div>

CSS

h4 a:link {
 text-decoration:none;
 }

【讨论】：

【解决方案5】：

你的 css 是错误的。试试：

.hcolor a:hover{
 color: #fff;
 text-decoration:none;
 }

附：为什么在<a> 标签内使用<h4> 标签？只需使用 css 为您的 <a> 设置样式

附言好的，让我更好地解释一下：我的建议是删除 <h4> 并使用 css 为 <a> 提供您想要的样式。所以，你的 html 代码应该是：

<div class="hcolor">
 <a href="#">Custom Text</a>
</div>

在我看来，当你可以用 css 给出你想要的样式时，在 <a> 中使用另一个标签是没有意义的。

【讨论】：

【解决方案6】：

你好，

    a.hcolor:hover, .hcolor:hover {
        color: #fff;
        text-decoration: none;
    }

这个css代码可以工作

更新：你说你不工作。你确定你说的对吗？我认为我们没有理解问题

【讨论】：