css优先级机制说明
原文:css优先级机制说明
首先说明下样式的优先级,样式有三种：
1. 外部样式（External style sheet）
示例：
<!-- 外部样式 bootstrap.min.css --> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
2.内部样式（Internal style sheet）
示例:
<head>
<style type="text/css">
/*内部样式*/
h1 {color:blue;}
</style>
</head>
3.内联样式（Inline style）
示例：
<h1 style="color:blue">样式测试</h1>
虽然内联样式可以比较灵活的单独改变某一标签的样式，但还是建议尽量不要使用内联样式。因为这样做虽然更为直观，但不符合结构与表现分离的设计思想。
一般来说，以上三种样式的优先级如下：
内联样式>内部样式>外部样式
选择器的优先级：
选择器的种类可以分为三种，分别是：
1.标签名选择器 如 h1{}。
2.类选择器 如 .test{}。
3.ID选择器 如 #test{}。
同时还需要考虑到内联样式表，即在标签内写入style=""的方式。
在此我们用数字1000，100,10,1来表示上述三种选择器和内联样式表的权值，数字越大则权值越大，也就是优先级越高。
各个选择器的权值如下：
1. 内联样式表的权值最高，设为1000；
2. ID 选择器的权值其次，设为 100
3. Class 类选择器的权值第三，设为 10
4. HTML 标签选择器的权值最低，设为 1
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
/* 内部样式 */
#blueP p
{
/* 权值 = 100+1=101 */
color:blue;
}
#blueP .red
{
/* 权值 = 100+10=110 */
color:red;
}
#blueP p span
{
/* 权值 = 100+1+1=102 */
color:yellow;
}
#blueP span
{
/* 权值= 100+1=101 */
color:black;
}
</style>
</head>
<body>
<div id="blueP">
<p class="red">优先级测试
<span>优先级测试</span>
</p>
<p>优先级测试</p>
</div>
</body>
</html>
在火狐，IE10，Chrome浏览器页面显示结果如下：
<p class="red">标签内的内容显示为红色
<span>标签内的内容显示为黄色
最后一个<p>标签内的内容显示为蓝色
另外在同一组属性设置中标有“!important”规则的优先级最大，示例如下：
<head>
<style type="text/css">
/*内部样式 */
#redp p
{
color:red !important; /* 优先级最大*/
color:blue;
}
</style>
</head>
<body>
<div id="redp">
<p>!important测试</p>
</div>
</body>
</html>
在火狐，IE10，Chrome浏览器页面显示结果如下：
<p>标签里的内容显示为红色
其他补充：
1.选择器的权值越大优先级越高；
2.当权值相等时，后出现的样式表设置比先出现的样式表设置优先级高；
3.继承的CSS 样式优先级低于后来指定的CSS 样式
4.后代选择器和群组选择器是对标签名选择器、类选择器和ID选择器的扩展应用，在此就不介绍了。
css优先级机制说明的更多相关文章
- css 优先级 机制
多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External style sheet ...
- css优先级机制
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 1.important >(内联样式)Inline style >(内部样式)Internal style sheet ...
- css中的继承、层叠、样式优先级机制
一.继承与层叠:
- CSS 的优先级机制[总结]
样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External styl ...
- Css的优先级机制
样式的优先级 多重样式(Multiple Style):如果外部样式.内部样式.内联样式同时应用于同一个元素,就是使用多重样式的情况. 一般情况优先级如下: (外部样式)External style ...
- CSS 的优先级机制总结
一.样式优先级: 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使用多重样式的情况. 一般情况下,大家都认为优先级是:内联样式 > 内部样 ...
- css优先级计算规则
原文:css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没 ...
- CSS优先级的详细解说
一.什么是CSS优先级? 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 二.CSS优先级规则 既然样式有优先级,那么就会有一个规则来约定这个优先级,而这个“规则”就是本次所需要讲的重 ...
- css优先级和权重
1. 权重概念: 权重,是一个相对的概念,是针对某一指标而言.某一指标的权重是指该指标在整体评价中的相对重要程度. 权重系数,是表示某一指标项在指标项系统中的重要程度,它表示在其它指标项不变的情况下, ...
随机推荐
- MySQL Study之--Mysql无法启动“mysql.host”
MySQL Study之--Mysql无法启动"mysql.host" 系统环境: 操作系统:RedHat EL55 DB Soft: Mysql 5.6.4-m7 通过源代码包 ...
- debian 该分区的部分安装移动硬盘后无法识别。
有一个新的团购1T移动硬盘.购买格化学式ntfs经过几次简单的子区域. 4G硬盘PE.100G高速互动,盈800许多G分为两个相等的存储盘. 到您的计算机USB接口后,, 桌面弹出自己主动4一封信. ...
- C++它 typedef void *HANDLE
阅读时编写代码的代码,经常看到一个代码: typedef void *HANDLE ,这是它背后的故事?怎么理解呢? 不明白的时候.这是非常美妙的感觉,后来我才知道这,这是typedef定义,就在vo ...
- POJ 2777 Count Color(段树）
职务地址:id=2777">POJ 2777 我去.. 延迟标记写错了.标记到了叶子节点上.. . . 这根本就没延迟嘛.. .怪不得一直TLE... 这题就是利用二进制来标记颜色的种 ...
- shell脚本操作数据库
#!/bin/bash HOST_NAME="localhost" PORT=3306 USERNAME="root" PASSWORD="root& ...
- js面向对象的学习笔记九(BOM 与 DOM 经常使用的属性分析)
一 BOM物 window 的 相关属性 1. 用户配置的机器配置对象 navigator navigator.userAgent //该属性能够查看用户机器浏览器的配置 "Mozilla ...
- 微软将彻底改变Windows发布方式
看到网上的新闻信息: 微软上任 CEO 史蒂夫·鲍尔默在职最后一段时间引入了更快的产品公布周期.不再向从前那样,每隔几年公布一次重大产品升级,而是功能一旦开发完成就会推送升级. 显然,现任 CEO 纳 ...
- POJ 1664 把苹果
把苹果 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 25785 Accepted: 16403 Descript ...
- elasticsearch的rest搜索---mapping
目录: 一.针对这次装B 的解释 二.下载,安装插件elasticsearch-1.7.0 三.索引的mapping 四. 查询 五.对于相关度的大牛的文档 三.mapping 1. 索引的map ...
- 【Hibernate步步为营】--映射合集汇总
前几篇文章具体讨论了对象模型到关系模型的转化方法,对映射关系做了具体的了解,Hibernate将对象模型转化为对应的关系模型是通过使用对应的映射来完毕的(相同也能够使用注解),对于对象之间的关系的转化 ...