如何从 css 文件中禁用悬停效果？

Question

如何从css 文件中禁用悬停效果，并获得第二个`css 文件的悬停属性来处理html 元素。

HTML -

<p>
    <a href="" title="">demo hover</a>
</p>

style.css

a:hover{
    color:#000;
    background: #ccc;
    border:none;
   /*Here can be more styling*/ 
}

style_new.css

a:hover{
    color:green;
    background: #ccc;
    border:none;
    padding:4px;
   /*Here can be more styling*/ 
}

现在根据上面的代码，我希望禁用style.css 悬停效果。请注意，我无法更改 style.css。

Answer 1

你不能禁用一个规则，你只能覆盖它。如果您可以控制 css 顺序，则可以在前一个规则之后添加新规则。 如果两个声明具有相同的权重、来源和特异性，则后者指定获胜。

a:hover {
  color: #000;
  background: #ccc;
  border: none;
  /*Here can be more styling*/
}
a:hover {
  color: green;
  background: #ccc;
  border: none;
  padding: 4px;
  /*Here can be more styling*/
}

<p>
  <a href="" title="">demo hover</a>
</p>

如果你不能确定规则的顺序，你必须增加新规则的特异性。

概念

特异性是浏览器决定哪个 CSS 属性的方式 值与元素最相关，因此将是 应用。特异性仅基于匹配规则 由不同种类的 CSS 选择器组成。

如何计算？

特异性是应用于给定 CSS 声明的权重 基于每个选择器类型的计数。在特异性的情况下 相等，在 CSS 中找到的最新声明应用于 元素。特异性仅适用于针对相同元素的情况。 直接针对元素的 CSS 规则将始终优先 超越元素从祖先继承的规则。

p a:hover {
  color: green;
  background: #ccc;
  border: none;
  padding: 4px;
  /*Here can be more styling*/
}
a:hover {
  color: #000;
  background: #ccc;
  border: none;
  /*Here can be more styling*/
}

<p>
  <a href="" title="">demo hover</a>
</p>

参考：MDN - Specificity - w3.org - Cascading order

Answer 2

这取决于css加载顺序，最后一个总是有效的。 只需将新样式放在旧样式之后即可。

cascading-order

style.css

a:hover{
    color:#000;
    background: #ccc;
    border:none;
   /*Here can be more styling*/ 
}

style_new.css

a:hover{
    color:green;
    background: #ccc;
    border:none;
    padding:4px;
   /*Here can be more styling*/ 
}

Answer 3

我建议不要禁用:hover，而是将元素的属性设置为与:active、:visited、:linked 相同。

例如：

a.mylink{ color:#000; text-decoration:none; cursor: default; }

Answer 4

只要让 style_new.css 样式变得重要。 它会自动覆盖 style.css 样式。例如：

Style.css

    a:hover{
    color:#000;
    background: #ccc;
    border:none;
   }

style_new.css

 a:hover{
    color:green !important;
    background: #ccc !important;
    border:none !important;
    padding:4px !important;
}

Answer 5

只需确保将style_new.css 添加到HTML在 style.css 之后。 HTML 和 CSS 是从上到下“读取”的，这意味着无论第一个 CSS 之后出现的任何 CSS，都将覆盖第一个 CSS。

如果这不起作用，请给a 一个class 或id，您可以在style_new.css 中定位它们。