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

css的优先级

2024-07-07 19:24:18   238人阅读

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

在此推荐文章：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

 


联系
我们