关闭

CSS样式优先级与权重计算方式

标签: css标签样式优先级hover失效权重
5151人阅读 评论(2) 收藏 举报
分类:

CSS一共有四种样式控制方式:行内样式、内嵌样式、链接样式、导入样式(@import).选择器则有标签选择器,类名选择器,ID选择器,和伪标签选择器四种.那么它们的优先级与权重又是计算的呢?

首先上权重计算方法:

一.内联 > id > class >标签

权重计算数值

1.内联样式        1000
2.id样式          0100
3.class样式       0010   hover,nth-child()等CSS3"伪标签"权重与"真-class"相同;
4.标签样式        0001

以后是权重计算数值,也就是说,ul li a{}中的样式,将会比li a{}级别更高,因而

<ul>
    <li>
        <a>test</a>
    </li>
</ul>


<style>
 ul li a{   //权重等于0003
     color:red
 }

li a{   //权重等于0002
    color:blue
}
</style>

中的test字体颜色将会是红色而非蓝色.当样式设置位于同一种样式控制方式,比如全为链接时候,将会后者覆盖前者(CSS叠加样式表是进行样式的不断叠加,因而同一权重,后者会覆盖前者).

二,同权重,样式设置方式不同

而当样式设置权重相同但位于不同样式设置方式时,将会按照
行内样式>内嵌样式>链接样式.进行样式叠加.也就是说

假如

<ul>
    <li>
        <a>test</a>
    </li>
</ul>


<style>
 ul li a{   //权重等于0003,但是位于链接样式中
     color:red
 }

ul li a{   //权重等于0003,但是位于内嵌样式中
    color:blue
}
</style>

而这一次,test文字的字体颜色将为蓝色.

三.导入样式(@import)与内嵌样式

至于导入样式(@import)则是将其导入到内嵌样式中,故而其优先级与内嵌样式相同,同样符合叠加原理,或者说就近原则.

<link href="test.css" type="text1/css" rel="stylesheet">
    <title>新建网页标题</title>
    <style>
        @import "test2.css";
    </style>
</head>
<body>

// 此时同权重样式会显示"@import中的",而非"<link/>"中的


    <title>新建网页标题</title>
    <style>
        @import "test2.css";
    </style>
    <link href="test.css" type="text1/css" rel="stylesheet">
</head>
<body>

// 此时同权重样式会显示"<link/>中的,而非@import"中的

四,测试声明

本文所言均已经经过本人测试,而本文则是为了整理以往的网络材料,并修正其他前辈们的一些错误,如果你发现了本文中的一些错误,遗漏或者对此有什么疑问,请在博文下方留言,本人会及时回复.以下是本人的测试环境.

本文章中测试环境,如下:

谷歌版本: 50.0.2652.2 (64-bit);

Opera:36.0.2130.32 ,Windows 10 64-bit (WoW64);

火狐:44.0.2;

IE:11.162.10586.0;
1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:250758次
    • 积分:3049
    • 等级:
    • 排名:第11928名
    • 原创:93篇
    • 转载:20篇
    • 译文:2篇
    • 评论:34条
    博客专栏
    最新评论