如何从继承CSS规则中排除特定元素?

时间:2022-11-07 00:11:33

I have this CSS:

我有这个CSS:

a {
  color:#19558D;
  padding:3px 5px;
  text-decoration:none;
}

a:hover {
  background-color:#D1E1EA;
  color:#19558D;
  text-decoration:none;
}

It applies to all links, but what if I don't want it to apply to a specific link on the page? What can I do?

它适用于所有链接,但如果我不希望它应用于页面上的特定链接怎么办?我能做什么?

2 个解决方案

#1


8  

You can apply your own class or inline style to the link in question.

您可以将自己的类或内联样式应用于相关链接。

for example:

例如:

<a href="#" class="MyNewClass" />

or

要么

<a href="#" style="color:red;" />

#2


42  

There are two ways you can do this.

有两种方法可以做到这一点。

First way is to use the :not() selector and give your link that you don't want the styles applied to class:

第一种方法是使用:not()选择器并给出你不希望将样式应用于类的链接:

a:not(.unstyled):hover {
  background-color:#D1E1EA;
  color:#19558D;
  text-decoration:none;
}

However, the :not() selector is not supported in IE8 or less, so the second option is to give your unstyled links a class, and override those properties for that link with that class:

但是,IE8或更低版本不支持:not()选择器,因此第二个选项是为您的无样式链接提供一个类,并覆盖该类与该类链接的属性:

a.unstyled:hover {
  background-color:none;
  color:#000
  text-decoration:none;
} 

#1


8  

You can apply your own class or inline style to the link in question.

您可以将自己的类或内联样式应用于相关链接。

for example:

例如:

<a href="#" class="MyNewClass" />

or

要么

<a href="#" style="color:red;" />

#2


42  

There are two ways you can do this.

有两种方法可以做到这一点。

First way is to use the :not() selector and give your link that you don't want the styles applied to class:

第一种方法是使用:not()选择器并给出你不希望将样式应用于类的链接:

a:not(.unstyled):hover {
  background-color:#D1E1EA;
  color:#19558D;
  text-decoration:none;
}

However, the :not() selector is not supported in IE8 or less, so the second option is to give your unstyled links a class, and override those properties for that link with that class:

但是,IE8或更低版本不支持:not()选择器,因此第二个选项是为您的无样式链接提供一个类,并覆盖该类与该类链接的属性:

a.unstyled:hover {
  background-color:none;
  color:#000
  text-decoration:none;
}