CSS 规范 : what has more "weight"

Question

在 css 规范中，什么会影响更多的 inline 样式或外部 !important

<div id="di" style="color: red;"></div>

外部“style.css”:

#di{color: green!important;}

div 文本颜色是红色还是绿色？

如果我使用 class 或 id，它是否适用于此？

我遇到这种情况让我想到了之前的事情:

<div id="di"><img src=".." /></div>

-> 我正在尝试从 CSS 更改图像，这可能吗？当我尝试使用

background-image: url(...)!important;

从外部样式表来看，它不会影响“div”。有解决办法吗？

Answer 1

!important 声明优先于规则特异性，但最好避免，因为它不能在没有另一个 !important 规则使用的情况下被覆盖。

CSS attempts to create a balance of power between author and user style sheets. By default, rules in an author's style sheet override those in a user's style sheet (see cascade rule 3).

However, for balance, an "!important" declaration (the delimiter token "!" and keyword "important" follow the declaration) takes precedence over a normal declaration. Both author and user style sheets may contain "!important" declarations, and user "!important" rules override author "!important" rules. This CSS feature improves accessibility of documents by giving users with special requirements (large fonts, color combinations, etc.) control over presentation.

#di{color: green!important;}

<div id="di" style="color: red;">test</div>

引用:!important rules