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选择符分类 首先来看 ...
随机推荐
- 微信小程序之实现slideUp和slideDown效果和点击空白隐藏
怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路是用css3的transform: translateY()属性,给需要动画的元素添加上一个动画class. 先上效果图: ...
- [译]Why do people write #!/usr/bin/env python on the first line of a Python script?
If you have several versions of Python installed, /usr/bin/env will ensure the interpreter used is t ...
- mmap函数实现
转自:https://www.cnblogs.com/huxiao-tee/p/4660352.htmlmmap是一种内存映射文件的方法,即将一个文件或者其它对象映射到进程的地址空间,实现文件磁盘地址 ...
- Android基础_web通信3
在Android基础_web通信2中,我运用的JSONObject是Android原生的json类,通过import org.json.JSONObject来导入. 还有另外一种更简单的方法,就是用G ...
- Beyond Globally Optimal: Focused Learning
这里对WWW 2017文章<Beyond Globally Optimal: Focused Learning for Improved Recommendations>进行一个简单的分析 ...
- 关于maven项install时报找不到符号的错误
解决办法: 聚合工程: 1.eclipse中执行project -->clean,将项目清理一下: 2.选中聚和工程右键-->Run As-->Maven builed...--&g ...
- Codeforces Beta Round #2 A,B,C
A. Winner time limit per test:1 second memory limit per test:64 megabytes input:standard input outpu ...
- BZOJ2441: [中山市选2011]小W的问题
题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2441 首先要注意到x1>x3且x5>x3(要是没有这个设定就是树状数组水题了.. ...
- HDU-5421Victor and String
题目:http://acm.hdu.edu.cn/showproblem.php?pid=5421 因为要在前面插字符,所以维护一个前缀链和后缀链,在同一棵回文树上搞,如果有某个最长回文后缀(或前缀) ...
- 二分查找c++简单模板
//数组a[]中有n各元素,已经按升序排序,待查找的元素x sort(a,a+n); //升序排序 template<class Type> int BinarySearch(Type a ...