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

原创 2016年03月18日 08:56:08

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;
版权声明:欢迎转载,共同学习,但请尊重版权,标明出处:http://blog.csdn.net/fontthrone

Css 学习笔记--样式引入方式及按权重判断优先级

CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。 从CSS 样式代码插入的形...
  • Lady_seven
  • Lady_seven
  • 2016年03月08日 11:45
  • 980

css选择器优先级及权重计算

一、优先级分类 通常可以将css的优先级由高到低分为6组: 第一优先级:无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。...
  • Coder_Chang
  • Coder_Chang
  • 2017年05月27日 09:57
  • 1974

权重--样式的优先级顺序

样式的优先级 多重样式(Multiple Styles):如果外部样式、内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况。 一般情况下,优先级如下: (外部样式)External s...
  • XiaoBuHome
  • XiaoBuHome
  • 2016年11月04日 10:30
  • 679

CSS样式权重优先级

样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符      ◆important的权重...
  • xingongfang
  • xingongfang
  • 2015年02月10日 16:12
  • 109

css-样式优先级算法

1.CSS优先级算法如何计算?1.css优先级是由四个级别和各个级别出现的次数决定的,值从左到右,左面的最大,一级大于一级2.优先级算法每个规则对应一个初始四位数:0,0,0,0若是行内样式优先级,则...
  • github_34514750
  • github_34514750
  • 2016年09月16日 11:25
  • 967

详解css样式处理的优先级

想要对一个标签处理它的样式,可以用 class=“” 的方式来定义它的类,然后在类中处理他的样式 例如: .box{width:100px;height:100px;backgrou...
  • u014028956
  • u014028956
  • 2015年07月17日 11:21
  • 2196

CSS选择器优先级计算

CSS选择器优先级计算
  • Dong_PT
  • Dong_PT
  • 2016年04月29日 20:14
  • 1266

CSS样式的优先级和权重

1、相同权值情况下,CSS样式的优先级总结来说,就是——就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。   2、...
  • qq_39078439
  • qq_39078439
  • 2017年06月13日 20:50
  • 186

样式优先级CSS优先级CSS样式权重

样式优先级
  • dfydn
  • dfydn
  • 2017年02月17日 14:53
  • 232

CSS中常用选择器及权重计算

CSS中常用选择器及权重计算   目前常用的选择器有七种,分别是 1, 标签选择器 写法如下 标签名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; .........
  • gm546202249
  • gm546202249
  • 2016年12月23日 20:10
  • 761
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS样式优先级与权重计算方式
举报原因:
原因补充:

(最多只允许输入30个字)