logo标签列表

我可以翻译成中文。问题是“我能防止CSS样式被覆盖吗？”

javascriptjqueryhtmlcss
12

我希望在页面加载时对某些链接按钮应用CSS，但其中一个 <a id="lb1">logoff</a> 必须保持其样式，无论是否悬停或其他事件都不能改变其样式。

这些链接按钮没有类，并且应用于它们所有的CSS是通过标签完成的，如下所示：

a
{
 //style
}

a:hover
{
  // style
}

有可能吗？

3
你可以尝试在 CSS 行末添加 !important。不确定这样做是否有效。 - War10ck
你应该在样式定义的末尾添加 !important。 - Morpheus
所以，不要对该元素应用任何其他样式。 - adeneo
从技术角度讲，是不必要的。但是，如果你控制CSS，这真的不应该是必需的。只需更好地管理您的代码。 - Shmiddty
7个回答
11

不可以。

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

您可以使用!important的方式，确保它们只会被另一个!important规则覆盖（哎呀）。

但是无法防止它们被覆盖。

6
请尽量避免使用!important。使用它会带来许多烦人的问题和难题，我认为这是一种非常懒惰的做法。您应该将一个类附加到您不想被覆盖的链接上。类比普通选择器（如a、p、b）具有更高的优先级。因此，如果您将此类附加到链接上，CSS将覆盖您设置的默认CSS。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/

我喜欢这个答案。它让你远离通常的坏习惯，这些习惯现在可能有效，但以后会引起问题。 - Phil
这并不总是正确的！！比如我正在使用Prestashop，那里有单独的自动加载自定义CSS文件，有时我必须使用!important，这样我就不必编辑核心模板文件，这使得一切更加透明和结构化。它可以被用于好处，你只需要知道何时使用它！！ - oliiix
3
为什么不给你想要更改的所有链接按钮添加一个class，而不是给你不想更改的链接按钮添加它。
然后你可以调用：
  $(".myClass").css("backgound-color", "blue");
  • 对于所有类名为myClass的元素，这将更改它们的背景颜色为蓝色。

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

  $(".myClass").addClass("myExtraClass");

这将使你的链接按钮的 class 属性变为 class="myclass myExtraClass"。
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比应用十二个类更少编码。（只是一个夸张的例子。我不知道你有多少链接。）希望这可以帮到你。
2

CSS按照级联的定义进行样式设置，因此您应用于a标签的任何样式都将应用于特定的标签，除非您对其进行了覆盖。

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

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

1

在你的 CSS 中应该使用 !important，例如：

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

a:hover {
    /* style */
    background: #FFF !important;
}
0
你可以通过创建另一个样式表并将其放置在HTML头部的样式表链接的末尾来覆盖你的CSS。
<head>
    <link rel="stylesheet" href="location/location/first_stylesheet.css">
    <link rel="stylesheet" href="location/location/revised_stylesheet.css">
</head>

这不是最高效的覆盖 CSS 的方法；更好的建议是通过添加带类属性的元素来消除需要使用单独样式表的必要性。类属性将允许您修改基本的 HTML 元素和标记，并覆盖最终的层以“统治它们所有”。享受吧！
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接