12

我想在页面加载时将 CSS 应用于某些链接按钮，但其中一个<a id="lb1">logoff</a>必须保持其样式，没有悬停或其他事件必须更改其样式。

链接按钮没有类，并且应用于所有这些的 css 是对标签完成的，这样：

a
{
 //style
}

a:hover
{
  // style
}

是否可以？

4

7 回答 7

11

不，你不能。

您可以使用更具体的选择器（甚至是带有 style 属性的内联 CSS），这样它们就不太可能被意外覆盖。

您可以使用（呃）大锤，!important因此它们只会被另一条!important规则覆盖。

但是，没有办法阻止它们被覆盖。

于 2012-12-19T17:06:24.483 回答
6

请请请请请尽量避免使用!important。你会遇到很多烦人的问题和使用它的问题。我认为这是一个非常懒惰的黑客。

您想要做的是将一个类附加到您不想被覆盖的链接。类的优先级高于一般选择器（例如a, p, b）。因此，如果您将此类附加到链接，CSS 将覆盖您设置的默认 CSS a。

CSS：

a {
color: red;
}
a:hover {
color: blue;
}
.derp:hover { /*you can add everything you want to preserve here, essentially make it the same as the link css. you can also change it to #lbl:hover, although there's no good reason to be using an ID as a CSS selector*/
color: red;
}

HTML：

<a href="#">this will turn blue on hover</a>

<a class="derp" href="#">this will stay red on hover</a>

这是一个向你展示的小提琴。第二个链接附加了一个保留原始样式的类：http: //jsfiddle.net/p6QWq/

于 2012-12-19T17:11:35.803 回答
3

为什么不将 a 添加class到您想要更改的所有链接按钮，而不将其添加到您不想更改的按钮。

然后你可以调用：

  $(".myClass").css("backgound-color", "blue");
  • 这会将具有类的每个元素的背景颜色更改为myClass蓝色背景。

或者您可以将一个全新的类添加到具有以下类的链接按钮myClass：

  $(".myClass").addClass("myExtraClass");
  • 这将使class您的链接按钮的属性class="myclass myExtraClass"
于 2012-12-19T16:59:58.820 回答
3

看到您发布的代码可以让您更清楚地了解您想要做什么。试试这个：

a {
    text-decoration: none;
    color: orange;
}
a:hover {
    text-decoration: underline;
    color: blue;
}

这会将默认样式应用于所有<a>元素。现在，您可以通过为具有上面给出的 id 的锚提供特定样式来覆盖此默认样式：

#lb1 {
    color: black;
    text-decoration: none;
}
#lb1:hover {
    color: black;
    text-decoration: none;
}

我用一个快速而肮脏的jsFiddle 模拟了这个。看看这是否会给你想要的结果。ID 优先于类和默认元素样式。因此，如果您有一个想要保持不变的元素，请相应地应用和标识特定元素并为其设置样式。这也可以帮助您避免将类应用于多个元素。应用一个 ID 比应用十二个类的编码更少。（只是一个夸张的例子。我不知道你有多少链接。）

希望这可以帮助。

于 2012-12-19T17:11:44.827 回答
2

css 根据定义是级联的，因此您应用于标签的任何样式都将应用于这个特定的样式，除非您覆盖它。

您必须为所有其他按钮分配一个类或覆盖此特定按钮的所有默认属性。

另外，不要忘记伪类 :visited 和 :active。

于 2012-12-19T17:04:40.460 回答
1

你应该!important在你的css中使用：

a {
    /* style */
    background: #FFF !important;
}

a:hover {
    /* style */
    background: #FFF !important;
}
于 2012-12-19T17:03:37.420 回答
0

您总是可以通过简单地创建另一个样式表并将其放在 html 头部的样式表链接的末尾来覆盖您的 css。

<head>
    <link rel="stylesheet" href="location/location/first_stylesheet.css">
    <link rel="stylesheet" href="location/location/revised_stylesheet.css">
</head>

然而，这不是覆盖你的 CSS 的最有效的方法；最好通过简单地附加带有类属性的元素来消除这种单独样式表的必要性。类 attr 将允许您修改基本的 html 元素、标签并覆盖最后一层以“统治它们”。享受！

于 2012-12-19T20:11:26.657 回答