html - 如何禁用 css 文件的悬停效果？

Question

如何禁用 css 文件的悬停效果，并获得第二个 `css 文件的悬停属性以在 html 元素上工作。

HTML -

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

样式.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>

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

The concept

Specificity is the means by which a browser decides which CSS property values are the most relevant to an element and therefore will be applied. Specificity is only based on the matching rules which are composed of css selectors of different sorts.

How is it calculated?

The specificity is a weight that is applied to a given CSS declaration based on the count of each selector type. In the case of specificity equality, the latest declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted. CSS rules that directly target an element will always take precedence over rules that an element inherits from an ancestor.

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