在html中设置元素样式的优先级是什么？

Question

在设计html时，只是想知道这些样式方法中的哪一个具有优先级：

使用CSS：

div{background-color:yellow}

使用样式属性：

<div style="background-color:red"></div>

使用脚本：

document.getElementsByTagName("div")[0].style.backgroundColor="green";

Answer 1

最后一个示例将获胜，因为它与您的第二个示例相同（两者都是内联style属性），但稍后会发生，用red覆盖green

一般来说，它（按优先级降序排列）：

• 带有style标记的内联!important属性
• 带有!important标志的CSS属性
• 没有style标记的内联!important属性
• 没有!important标志的CSS属性

...在＆＃34; CSS属性中的位置＆＃34;那里的区域是特异性的整个领域。

Answer 2

优先级与您的列表完全相反。 链接的CSS样式表被内联样式覆盖，JS添加的规则将覆盖链接样式和内联样式。它们实际上是被覆盖的 - 没有存储，但是在加载/运行JS时，它将覆盖会话剩余时间的当前样式（或更长时间，具体取决于JS的设置方式）。

Answer 3

css属于css文件，所以使用CSS通常是最好的选择。它更好，因为它更具可读性，并且比直接放在html中或通过javascript更有条理。

需要注意的一件重要事情是CSS规范。这意味着，当浏览器必须应用样式时，编写CSS的不同方法具有不同的优先级。请查看此链接以获取有关CSS规范的文档：

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

希望有所帮助