首页 > 代码库 > css的优先级

css的优先级

网页开发中遇到不少次关于样式另类的问题,于是想把从网上找的帖子和自己想到的做一个简单的规整。

在此推荐文章:http://www.cnblogs.com/ccdc/p/2765827.html

原则一:内嵌样式->内部样式->外联样式,优先级依次排列

  如果外联样式放在内部样式后,将会覆盖内部样式。

ex:

<html>
    <head>
        <title>css优先级</title>
        <style type="text/css">
            .priority {color: #00ff00;}
        </style>
    </head>
    <body>
        <div class="priority">公告</div>
    </body>
</html>
<link rel="stylesheet" type="text/css" href="/Content/priority.css">
<!--color:#ff0000;-->

结果:

公告

原则二:明确指定添加样式的元素,使有层次

ex:

<html>
<head>
    <title>css优先级</title>
    <style type="text/css">
        div p span.priority {color: #00ff00;}/*1*/
        .priority {color: #ff0000;}/*2*/
    </style>
</head>
    <body>
        <div ><p><span class="priority">公告</span></p></div>
    </body>
</html>

结果:写法1要优先于写法2。

公告

 

原则三:css选择器特性

css选择器 特性值
id选择器:# 100
className:. 10
html标记:span 1


原则二中的例子也可以这样解释:写法1选择器的特性值为1+1+1+10=13,写法1选择器的特性值为10。很明显根据特性值的大小

可以决定写法1要优先于写法2。

原则四:!important

  在一组样式表中,如果样式有声明!important,表示优先级高。

ex:

<html>
    <head>
        <title>css优先级</title>
        <style type="text/css">
            .priority {color: #ff0000;color: #0000ff !important;}
    </style>
    </head>
    <body>
        <div ><p><span class="priority">公告</span></p></div>
    </body>
</html>

体现这四个原则的例子在IE7~9,chrome,firefox,safari,搜狗,360浏览器都支持

五:@import
写到这顺便提一下@import ,@import与link的区别在于:@import先加载页面再加载样式表,link先加载样式表再加载页面。所以在网速慢的情况下

如果使用@import加载页面时会出现跑版的瞬间。

@import只能加载样式表,不能像link一样添加rel,style等属性。

个人不建议使用@import