官方表述的CSS样式优先级如下:

通用选择器(*) < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式

那么,我们来举个例子

html代码:

<div class="img-div">
<img src="data:images/icon.png" class="img" id="img" alt="img" style="width:50px" />
</div>

引入一个style.css样式:

<link type="text/css" rel="stylesheet" href="css/style.css" />

在style.css样式中写入

*{width:100px}
.img{width:400px;}
img[alt="img"] {width:300px}
img:hover{width:350px}
img{width:450px}
#img{width:250px;}

打开html可以发现

图1 ↑

可见内联式的样式权重要高于外部引用,那么我们把内联的style样式去掉,图片显示大小如图2:

图2↑                           图3↑                              图4↑

同样是外部引用的样式,ID比其他的都要优先,把#img的样式去掉,效果如图3:效果是引用了属性选择器宽度为300px

再把鼠标移动上去效果如图4。

以此类推,分别去掉属性选择器(图4),类选择器(图5),元素选择器(图6)

图4↑                               图5↑                      图6↑

再将外部引用的样式复制到html中嵌入<style></style>:

<style>
*{width:500px}
#img{width:550px;}
img[alt="img"] {width:600px}
img:hover{width:650px}
.img{width:700px;}
img{width:750px}
</style>

发现嵌入式的样式权重都要高于外部引用,最后的优先级如下:

内联

嵌入

外部

内联

1

-

-

ID 选择器

-

2

3

伪类

-

4

5

属性选择器

-

6

7

类选择器

-

8

9

元素(类型)选择器

-

10

11

*

-

12

13

*上述表格从小到大,数值越小越优先!


事实上,CSS内部是按每条样式的权重值来计算优先级的,各类型选择器所对应的权重值如下:

元素, 伪元素: 1 – (0,0,0,1)
类, 伪类, 属性: 1 – (0,0,1,0)
ID: 1 – (0,1,0,0)
内联样式: 1 – (1,0,0,0)

也就相当于:

  1. 第一等:代表内联样式,如: style=””,权值为1000
  2. 第二等:代表ID选择器,如:#content,权值为100
  3. 第三等:代表类,伪类属性选择器,如.content,权值为10
  4. 第四等:代表类型选择器伪元素选择器,如div p,权值为1

实例:

<div class="img-div" id="img-div">
<div id="img-div1">
<img src="data:images/u484.png" class="img" id="img" alt="img" />
</div>
</div>
#img-div #img-div1 #img{width:300px}//300
#img-div #img{width:200px}//200
#img{width:150px;}//100

显示结果:


!important修改权重

如非特殊情况,慎用!important。因为使用!important会扰乱原本层叠和权重产生正常的作用顺序,使后期维护带来麻烦。

css样式优先级问题的更多相关文章

  1. CSS 样式优先级

    首先,选择器优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 !important 规则例外,该样式声明会覆盖CSS中 ...

  2. CSS样式优先级

    关于CSS样式优先级 一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用 ...

  3. 强制改变css样式优先级

    .list{ left:20px!important; } css !important作用是提高指定CSS样式规则的应用优先权. !important是CSS1就定义的语法,作用是提高指定样式规则的 ...

  4. css样式权重优先级,css样式优先级

    原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...

  5. 权重和层叠规则决定了CSS样式优先级

    一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级别的优先级如下: important > 内联 > ID > 类 > 标签 | ...

  6. 关于CSS样式优先级

    一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用!important可 ...

  7. css样式优先级计算规则

    css样式的优先级分为引入优先级和声明优先级. 引入优先级 引入样式一般分为外部样式,内部样式,内联样式. 外部样式:使用link引入的外部css文件. 内部样式:使用style标签书写的css样式. ...

  8. 通过!important设置css样式优先级

    CSS写在不同的地方有不同的优先级,一般 .css文件中的定义 < 元素style中的属性,但是如果使用!important,则会变得不一样,使用!important的css定义是拥有最高的优先 ...

  9. css样式优先级和权重问题

    内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...

随机推荐

  1. 【opencv学习笔记三】opencv3.4.0数据类型解释

    opencv提供了多种基本数据类型,我们这里分析集中常见的类型.opencv的数据类型定义可以在D:\Program Files\opencv340\opencv\build\include\open ...

  2. SQL一次性插入大量数据【转载】

    在SQL Server 中插入一条数据使用Insert语句,但是如果想要批量插入一堆数据的话,循环使用Insert不仅效率低,而且会导致SQL一系统性能问题.下面介绍SQL Server支持的两种批量 ...

  3. Regex Golf 练习记录

    正则表达式的练习网站:https://alf.nu/RegexGolf 共17道题:只能说从第10题开始就很变态了,就是看看答案好了 .Warmup: foo .Anchors: k$ 或 ick$ ...

  4. c程序十六进制字符串转换为整数与反转

    字符串转整数使用sscanf ; char *buf = "1d5ce"; sscanf (buf, "%x", &value); printf (&q ...

  5. 7.17实习培训日志-java基础

    总结 今天主要是学习了java基础,java面向对象方面的知识,然后下午老师讲了软件的设计模式,今天看了一部分,印象深刻的是单例模式,用枚举实现单例模式.晚上主要讲了maven的一些基础知识和idea ...

  6. dialog 设置maxHeight 最大高度

    WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);Displ ...

  7. 在 WinForm/WPF 下制作 Google Material Design 风格程序

    国内社区没有,顺手转.WinForm: https://github.com/IgnaceMaes/MaterialSkin演示:https://www.youtube.com/watch?v=A8o ...

  8. 散列表(Hash table)及其构造

    散列表(Hash table) 散列表,是根据关键码值(Key value)而直接进行访问的数据结构.它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度.这个映射函数叫做散列函数,存放记录 ...

  9. sql server 2012 profiler打开2016的profiler

    软件环境:1.本机是sql server 2012,远程服务器是sql server 20162.本机是Windows 7,安装不了sql server 2016 问题场景1:本机sql server ...

  10. codeforces1009G Allowed Letters【贪心+hall定理】

    因为是字典序所以贪心选当前能选的最小的,所以问题就在于怎么快速计算当前这个位置能不能选枚举的字母 重排之后的序列是可以和原序列完美匹配的,而完美匹配需要满足hall定理,也就是左边任意k个集合一定和右 ...