当前位置：文江博客话题详情

如何阅读 CSS 中的 !important ？

发布于 2024-12-04 04:04:59 字数 192 浏览 1 评论 0原文

CSS 属性 !important 是如何读取的？

是否真的很重要、感叹号重要、...？

答案：从下面的答案来看，它似乎被简单地理解为重要，或bang important。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

锦欢 2024-12-11 04:04:59

“!important”声明（分隔符“!”和关键字
“重要”遵循声明）优先于正常
声明。

http://www.w3.org/TR/CSS2/cascade.html #important-rules

基本上，如果两个样式规则相同...它会赋予标记为 !important 的规则更大的重要性，并将应用这些样式。

示例

div{
    opacity:0 !important;
}

div.jason{
    opacity:1;
}

即使第二条规则更具体（一个元素+一个类而不是一个元素），也会应用第一条规则

注意：IE6忽略！重要 当您有两个相同的属性并且其中一个很重要时 - 它将始终应用最后一个声明，无论它是否被标记为重要。 **添加自 @BoltClock 下面的评论。

警告： !important 是只在绝对必要时才应使用的锤子。几乎总是，最好使用更具体的选择器来实现更高的特异性并按照您想要的方式应用样式。 !important 可能会让未来的开发人员很难找到并更改您的代码。

一个很好的用例： !important 非常适合用户定义的样式，在这种情况下，用户希望以自己的特定方式操作网站页面。浏览器（例如将所有背景设为黑色，文本设为黄色）。无需担心特殊性，用户可以向某些元素（如 body）添加样式并使样式呈现。

an "!important" declaration (the delimiter token "!" and keyword
"important" follow the declaration) takes precedence over a normal
declaration.

http://www.w3.org/TR/CSS2/cascade.html#important-rules

Basically, where two style rules are the same... it gives the one marked !important greater importance and will apply those styles.

Example

div{
    opacity:0 !important;
}

div.jason{
    opacity:1;
}

The first rule would be applied even though the second rule is more specific (one element + one class as opposed to one element)

Note: IE6 ignores !important when you have two of the same property and one of them is important - it'll always apply the last declaration, whether or not it was marked important. **Added from @BoltClock's comment below.

Warning: !important is a hammer that should only be used when absolutely necessary. Almost always, it is better to use more specific selectors to achieve greater specificity and have your styles applied the way you want. !important can make it very difficult for future developers to find and make changes to your code.

One good use case: !important is great for user-defined styles, where a user wants to manipulate Web site pages in specific way in his browser (say make all the backgrounds black and the text yellow). Without having to worry about specificity, the user can add styles to certain elements (like body) and make the styles render.

回复收藏 0 原文

落在眉间の轻吻 2024-12-11 04:04:59

只是“重要”或“非常重要。”在这种情况下，！绝对不是否定。

它不是标签，而是关键字。

回复收藏 0 原文

迷鸟归林 2024-12-11 04:04:59

body { 颜色：红色！重要； } 在英语中的意思是“红色的文本颜色很重要”。

就CSS如何看待它而言，它对该声明应用了更多的“权重”，因此它更有可能成为应用的样式。

举个例子，我们可以使用

p { color: red; }
p.blue { color: blue; }

现在，任何具有 blue 类的 p 将显示蓝色文本，所有其他将显示红色文本。
如果我们将其更改为这样...

p { color: red !important; }
p.blue { color: blue; }

它们都将显示红色文本（即使它们具有蓝色类），因为我们为第一个选择器赋予了更重要的地位。

body { color: red !important; } means, in English, "The text-color of red is important".

In terms of how CSS sees it, it applies more "weight" to that declaration, so it will be (far) more likely to be the applied style.

For an example of this, we can use

p { color: red; }
p.blue { color: blue; }

Now, any p with a class of blue will show blue text, all the others will show red text.
If we change it to this...

p { color: red !important; }
p.blue { color: blue; }

They will all show red text (even if they have a class of blue), as we've given more important to the first selector.

回复收藏 0 原文

み格子的夏天 2024-12-11 04:04:59

我喜欢认为它“不重要”。

p { 
    color: red !important; /* The rest is NOT important for this CSS property. */
}

这意味着该声明及之后的所有其他内容都不重要，不应予以考虑。这个想法来自于“！”的使用。在许多编程语言中，字符作为布尔值 NOT。这样，当您阅读时，!important 就有意义了。

I like to think of it as "NOT important".

p { 
    color: red !important; /* The rest is NOT important for this CSS property. */
}

Meaning that everything else from that declaration and on is NOT important and should not be taken into account. The idea came from the usage of the "!" character as a boolean NOT in many programming languages. This way the !important makes sense as you read it.

回复收藏 0 原文