Css的优先级机制
样式的优先级
多重样式(Multiple Style):如果外部样式、内部样式、内联样式同时应用于同一个元素,就是使用多重样式的情况。
一般情况优先级如下:
(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style
有一个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。
示例如下:
<head> |
<style type="text/css"> |
/* 内部样式 */ |
h3{color:green;} |
</style> |
<!-- 外部样式 style.css --> |
<link rel="stylesheet" type="text/css" href="style.css"/> |
<!-- 设置:h3{color:blue;} --> |
</head> |
<body> |
<h3>测试!</h3> |
</body> |
选择器的优先级:
内联样式表的权值最高1000,
ID选择器的权值为100,
class类选择器的权值为10,
html标签选择器的权值为1
CSS优先级法则:
A选择器都有一个权值:权值越大越优先。
B当权值相等时,后出现的样式表设置要优先于先出现的样式表设置。
C网页编写者设置的css样式的优先权高于浏览器设置的样式
D继承的CSS样式不如后来指定的CSS样式
E在同一组属性设置中标有"!important"规则的优先级最大;
<html> |
<head> |
<style type="text/css"> |
#redP p{ |
/*两个color属性在同一组*/ |
color:#00f !important; /* 优先级最大 */ |
color:#f00; |
} |
</style> |
</head> |
<body> |
<div id="redP"> |
<p>color</p> |
<p>color</p> |
</div> |
</body> </html> |
Css的优先级机制的更多相关文章
- CSS 的优先级机制[总结]
样式的优先级 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 一般情况下,优先级如下: (外部样式)External styl ...
- CSS 的优先级机制总结
一.样式优先级: 多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使用多重样式的情况. 一般情况下,大家都认为优先级是:内联样式 > 内部样 ...
- CSS 样式优先级
首先,选择器优先级顺序 优先级逐级增加的选择器列表: 通用选择器(*) 元素(类型)选择器 类选择器 属性选择器 伪类 ID 选择器 内联样式 !important 规则例外,该样式声明会覆盖CSS中 ...
- css中的继承、层叠、样式优先级机制
一.继承与层叠:
- css优先级机制说明
原文:css优先级机制说明 首先说明下样式的优先级,样式有三种: 1. 外部样式(External style sheet) 示例: <!-- 外部样式 bootstrap.min.css -- ...
- CSS 之 样式优先级机制
多重样式(Multiple Styles):如果外部样式.内部样式和内联样式同时应用于同一个元素,就是使多重样式的情况. 1.一般情况下,优先级从低到高,如下: 浏览器缺省(即浏览器默认) →(外部样 ...
- css优先级机制
所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 1.important >(内联样式)Inline style >(内部样式)Internal style sheet ...
- css的优先级 和 权重
之前写页面样式时,有时会遇到 用多条样式定义规则对同一个元素进行样式设置的时候,当时想到的就是 按css选择器的优先级来搞定这个问题,说实话当时也就只记得 内嵌样式 > id > cla ...
- CSS选择器优先级总结
CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...
随机推荐
- 分布式架构ActiveMQ的安装与使用(单节点)
具体内容请参考样例代码和视频教程: http://www.roncoo.com/course/view/85d6008fe77c4199b0cdd2885eaeee53 IP:192.168.4. ...
- 咫尺论坛|即速应用-微信小程序社区
咫尺论坛|即速应用-微信小程序社区 是一个集微信和支付宝小程序行业资讯.开发资源.技术交流于一身的大型小程序开发论坛,成立伊始便迅速聚集了一大批小程序开发爱好者,短时间内成为了国内领先的小程序开发者社 ...
- 你不知道的JSON.stringify和JSON.parse
json是JavaScript 对象表示法(JavaScript Object Notation),是一种简单的数据格式,类似于XML,其格式为名称/值对,数据用逗号隔开,名称必须用双引号括起来.例如 ...
- Android热修复框架汇总整理(Hotfix)
Android平台出现了一些优秀的热更新方案,主要可以分为两类:一类是基于multidex的热更新框架,包括Nuwa.Tinker等:另一类就是native hook方案,如阿里开源的Andfix ...
- backbone 要点知识整理
1.backbone 是个mvc的库,官方文档说它是个库,而不是个框架.库和框架的区别就是,库只是个工具,方便你的项目应用,不会改变你的项目结构,而框架会有一套自己的机制,项目需要遵循框架的设计来实现 ...
- 在mac下使用终端命令通过ssh协议连接远程linux系统,代替windows的putty
指令:ssh username@server.address.com 事例:wangmingdeMacBook-Pro:~ xxxxxxxxxx$ ssh root@XXXX.net The auth ...
- 学习笔记 - 兼容ie的透明度问题
.opacity{font-size: 14px;-khtml-opacity:0.6;-moz-opacity:0.6;filter:alpha(opacity=60);filter:"a ...
- fmod函数和modf函数
最近从博客上看到了一个fmod函数,结果又蹦出来一个modf函数 fmod函数: 头文件:#include<math.h> C库函数... fmod()用来对浮点数进行取模(求余),原型为 ...
- HTML 和 PHP 、MySQL 的交互
为什么要用到数据库? World Wide Web (WWW)不仅仅是一个提供信息的地方.如果你有什么东西,作一个网站,同样可以和全世界的人一起分享.但是,这并不是一件很容易的事.当网站越做越大时,你 ...
- RPM包效验