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选择符分类 首先来看 ...
随机推荐
- replace into 浅析之一
一 介绍 在笔者支持业务过程中,经常遇到开发咨询replace into 的使用场景以及注意事项,这里做个总结.从功能原理,性能和注意事项上做个说明.二 原理2.1 当表中存在主键但是不存在唯一建的 ...
- java 重定向和转发的区别
注:原创链接 http://www.cnblogs.com/shenliang123/archive/2011/10/27/2226892.html response.sendredirect(&q ...
- C/C++知识点清单01
第一章 C/C++程序基础 一.一般赋值语句: 考察一般赋值语句的概念和方法. 1.程序: #include<stdio.h> int main(void) { ,y,z; x*=(y=z ...
- Spring Boot快速入门（四）：使用jpa进行数据库操作
原文地址:https://lierabbit.cn/articles/5 添加依赖 新建项目选择web,JPA,MySQL三个依赖 对于已存在的项目可以在bulid.gradle加入,spring b ...
- Educational Codeforces Round 34
F - Clear The Matrix 分析 题目问将所有星变成点的花费,限制了行数(只有4行),就可以往状压DP上去靠了. \(dp[i][j]\) 表示到第 \(i\) 列时状态为 \(j\) ...
- CVE-2017-8635复现
在最近几个月里,我花了一些时间深入了Device Guard以及如何实现用户模式代码完整性(UMCI).如果您对Device Guard不熟悉,您可以 在这里阅读更多信息.通常情况下,UMCI可防止未 ...
- HDU 1754 I Hate It(线段树之单点更新，区间最值)
I Hate It Time Limit: 9000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total ...
- COGS 144. [USACO Dec07] 魅力手镯【01背包复习】
144. [USACO Dec07] 魅力手镯 ★ 输入文件:charm.in 输出文件:charm.out 简单对比 时间限制:1 s 内存限制:8 MB 译 by CmYkRgB1 ...
- int ，long long等范围
unsigned int 0-4294967295 int -2147483648-2147483647 unsigned long 0-4294967295long -21474 ...
- UE4 多线程（一）
UE4中使用多线程的有两种方式,一种方式就是使用FRunnable和FRunnableThread,另一种方式是Task Graph System.Task Graph System有时会占用游戏线程 ...