2013-02-18 72 views
2

我正在构建一个JavaScript插件/ CSS表单,它必须覆盖页面的原始样式(该插件可以使任何静态网站响应)。内联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样式并不优先于内嵌样式。如果我将inline样式放置在文档的<head><style>标记中,则应用指向jq_responsive.css文件覆盖的所有样式的类。但是,这不是我的目的。

!important我可以在这里覆盖的唯一方法吗?我想尽可能避免这种情况。

+0

我可以问你,你为什么甚至使用内联样式? – sascha 2013-02-18 08:10:00

+0

它只能由!重要 – 2013-02-18 08:13:16

+0

覆盖一般规则是最后遇到的css规则优先,所以在这种情况下,css文件优先重复样式属性。 – 2013-02-18 08:15:01

回答

5
特异性

新月为了

下选择的列表是通过增加特异性:

  • 通用选择
  • 类型选择
  • 类选择
  • 属性选择
  • 伪类
  • ID选择
  • 内嵌样式

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

!重要的可能是CSS的唯一办法,或者你可以使用JavaScript来删除内联CSS

+0

有趣。我想我不得不把内联CSS与JavaScript并将其放入一个CSS文件,然后从内联删除它。 !在这种情况下重要的不起作用,因为样式并不总是优先考虑的,只比内联样式更重要。 – Jascination 2013-02-18 12:47:13