内联 CSS 是否会覆盖页面底部的样式表？答案

【问题标题】：Does inline CSS override a stylesheet at the bottom of the page?内联 CSS 是否会覆盖页面底部的样式表？
【发布时间】：2013-02-18 08:07:11
【问题描述】：

我正在构建一个 javascript 插件/CSS 表，它必须覆盖页面的原始样式（该插件使任何静态网站都具有响应性）。

目前，如果我有类似的情况：

<body id="home">
    <div style="width:900px; background:green; height:500px; margin:0 auto;">
        <div style="width:400px; background:blue; height:300px;"
            <p>Hello hello hello hello hello hello</p> 
        </div>
    </div>  
    <div style="width:800px; background:green; height:500px;">
        <div style="float:left; width:400px; background:blue; height:300px;"
            <p>blah blah blah blah blah</p> 
        </div>
    </div>
    <link rel="stylesheet" href="css/jq_responsive.css" >
    <script src="js/main.js"></script>
</body>

我的 jq_responsive.css 样式不优先于内联样式。如果我将内联样式放在文档的<head> 中的<style> 标记中，则应用指向jq_responsive.css 文件应覆盖的所述样式的类。但是，这不是我的选择。

!important 是我可以在这里覆盖的唯一方法吗？如果可能的话，我想避免这种情况。

【问题讨论】：

请问你为什么还要使用内联样式？
它只能被 !important 覆盖
一般规则是最后遇到的 css 规则优先，因此在这种情况下 css 文件具有重复样式属性的优先级。
末尾的link 元素位于body 内，违反了HTML 规范，因此可能会被忽略。
@JukkaK.Korpela 有没有更好的地方放置它以确保它优先？

标签： css

【解决方案1】：

特异性的新月顺序

以下选择器列表是通过增加特异性：

通用选择器
类型选择器
类选择器
属性选择器
伪类
ID 选择器
内联样式

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

!important 可能是 CSS 中唯一的方式，也可以使用 JavaScript 移除内联 CSS

【讨论】：

有趣。我想我必须将内联 CSS 与 javascript 一起放入一个 css 文件中，然后将其从内联中删除。 !important 在这种情况下不起作用，因为样式并不总是具有优先权，只是比内联样式更重要。