css样式优先级问题
2018-06-24 01:47:16来源:未知 阅读 ()
官方表述的CSS样式优先级如下:
通用选择器(*) < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式
那么,我们来举个例子:
html代码:
<div class="img-div"> <img src="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)
也就相当于:
- 第一等:代表内联样式,如: style=””,权值为1000。
- 第二等:代表ID选择器,如:#content,权值为100。
- 第三等:代表类,伪类和属性选择器,如.content,权值为10。
- 第四等:代表类型选择器和伪元素选择器,如div p,权值为1。
实例:
<div class="img-div" id="img-div"> <div id="img-div1"> <img src="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会扰乱原本层叠和权重产生正常的作用顺序,使后期维护带来麻烦。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash