CSS样式定义的优先级顺序总结
CSS样式定义的优先级顺序总结
层叠优先级是:
浏览器缺省 < 外部样式表 < 内部样式表 < 内联样式
其中样式表又有:
类选择器 < 类派生选择器 < ID选择器 < ID派生选择器
派生选择器以前叫上下文选择器,所以完整的层叠优先级是:
浏览器缺省 < 外部样式表 < 外部样式表类选择器 < 外部样式表类派生选择器 < 外部样式表ID选择器 < 外部样式表ID派生选择器 < 内部样式表 < 内部样式表类选择器 < 内部样式表类派生选择器 < 内部样式表ID选择器 < 内部样式表ID派生选择器 < 内联样式...共12个优先级
为了说明该问题,请参见下面的例子说明。
- <html>
- <head>
- <title></title>
- <style type="text/css">
- div { color: #00FF00 } /* 绿色 */
- .a1 { color: #0000FF } /* 蓝色 */
- .a1 div { color: #00FFFF } /* 青色 */
- .a2 { color: #FF0000 } /* 红色 */
- #a2 { color: #FFFF00 } /* 黄色 */
- #a2 div { color: #FF00FF } /* 紫色 */
- </style>
- </head>
- <body>
- <div>我是绿色,内部样式表优先于浏览器缺省</div>
- <div class="a2">我是红色,类选择器优先于内部样式表</div>
- <div class="a2" id="a2">我是黄色,ID选择器优先于类选择器</div>
- <div class="a1">
- <span>我是蓝色,类选择器优先于内部样式表</span>
- <div>我是青色,类派生选择器优先于类选择器</div>
- <div class="a2">我还是青色,类派生选择器优先于所有类选择器</div>
- <div id="a2">
- <span>我是黄色,ID选择器优先于类派生选择器</span>
- <div>我是紫色,ID派生选择器优先于类派生选择器</div>
- <div class="a1">我还是紫色,ID派生选择器优先于所有类选择器</div>
- <div class="a1" id="a1">我还是紫色,ID派生选择器优先于所有ID选择器</div>
- <div class="a1" id="a1" style="color:#000000;">我是黑色,内联样式驾到闲杂人等退下</div>
- </div>
- </div>
- </body>
- </html>
运行后的效果图:
另外,如果同一个元素在没有其他样式的作用影响下,其Class定义了多个并以空格分开,其优先级顺序为:
一个元素同时应用多个class,后定义的优先(即近者优先),加上!important者最优先!
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title></title>
- <style type="text/css">
- .a2 {
- font-size: 18pt;
- color: #0000FF!important;
- }
- .a1 {
- font-size: 9pt;
- color: #FF0000;
- }
- </style>
- </head>
- <body>
- <br />
- <span class="a1">a1</span><br />
- <span class="a2">a2</span><br />
- <span class="a2 a1">a2 a1</span><br />
- <span class="a1 a2">a1 a2</span><br />
- </body>
- </html>
运行后的效果图:
CSS样式定义的优先级顺序总结的更多相关文章
- css样式 浏览器的读取顺序
css样式 浏览器的读取顺序 例: tbody tr td{} 浏览器是先查找td,然后去找td tr,然后去找td tr tbody div p{}和div>p{}的区别 .div p{} 是 ...
- 三种css样式表及其优先级
1.行内样式 body内: <p style="text-indent: 2em;color: red"> 我是行内样式 </p> 2.内部样式表 body ...
- css 样式表的书写顺序
display || visibility list-style : list-style-type || list-style-position || list-style-image positi ...
- 28. 表单css样式定义格式
form>table>tbody>tr>td{padding:5px;font-size:14px;font-family:"Microsoft YaHei" ...
- 各大门户网站全局CSS样式定义
1.网易 body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: # ...
- CSS三大特性之优先级顺序
id选择器>类选择器>标签选择器>通配符>继承>浏览器默认
- CSS样式优先级
关于CSS样式优先级 一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用 ...
- 关于CSS样式优先级
一般情况下: [1位重要标志位] > [4位特殊性标志] > 声明先后顺序 !important > [ id > class > tag ] 使用!important可 ...
- 用JS查看修改CSS样式(cssText,attribute('style'),currentStyle,getComputedStyle)
CSS样式定义方法 大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. <d ...
随机推荐
- windows下nodejs监听80端口
windows下nodejs监听80端口时提示端口被占用报错,解决方案如下: 1.cmd---netstat -ano查看是什么程序占用了80端口: 2.控制面板--管理工具--服务--停止 SQL ...
- PHP语法-该注意的细节
php in_array(mixed $needle, array $haystack[, bool $strict = FALSE] ) 注意: 一.如果$needle 是字符串,则比较是区分大小写 ...
- Maven 那些破事
deploy 只上传了pom 晚上输命令,打算打包上传到本地库里,然后去服务器上部署新版本 mvn clean package deploy 结果看着mvn的build过程只是上传了pom,去库服务器 ...
- 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭
小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...
- js-ES6学习笔记-对象的扩展
1.ES6允许直接写入变量和函数,作为对象的属性和方法.这种写法用于函数的返回值,将会非常方便.CommonJS模块输出变量,就非常合适使用简洁写法. var ms = {}; function ge ...
- 从零开始学习html(十五)css样式设置小技巧——上
一.水平居中设置-行内元素 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> ...
- React-Native-Android-Studio整合开发+环境配置+官方实例
linux下React Native开发环境搭建,使用Android-studio工具进行React Native整合开发. 参考React Native的官方文档,通过图文详细记录开发过程.可以查看 ...
- 前端开发笔记(2)css基础(上)
CSS介绍 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS ...
- Python 基于python实现ADSL宽带帐号,密码的获取及宽带拨号
基于python实现ADSL宽带帐号的获取及宽带拨号 基本思想: 1.研究上网方式(实验环境为电信网线接入式ADSL,拨号方式PPPOE) 2.研究宽带帐号和密码生成规律(实验环境,宽带帐号为 ...
- Maven入门详情
Maven的作用 在开发中,为了保证编译通过,我们会到处去寻找jar包,当编译通过了,运行的时候,却发现"ClassNotFoundException",我们想到的是,难道还差ja ...