记录:CSS特殊性——权值规则
浏览器是根据权值来判断使用哪种css样式的,权值高的就使用哪种css样式。
下面是权值的规则:
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。例如下面的代码:
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
我们来思考一个问题:如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办?好,这一小节中的层叠帮你解决这个问题。
层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用。
css样式优先级: 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。
重要性
我们在做网页代码的时,有些特殊的情况需要为某些样式设置具有最高权值,怎么办?这时候我们可以使用!important来解决。
注意:!important要写在分号的前面
这里注意当网页制作者不设置css样式时,浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式,比如有的用户习惯把字号设置为大一些,使其查看网页的文本更加清楚。这时注意样式优先级为:浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。
记录:CSS特殊性——权值规则的更多相关文章
- CSS样式权值
内联样式表(InLine style)>内部样式表(Internal style sheet)>外部样式表(External style sheet) 例外:但如果外部样式表放在内部样式表 ...
- css选择器权值
有的时候我们为同一个元素设置了不同的CSS样式代码,那么元素会启用哪一个CSS样式呢?我们来看一下面的代码: p{color:red;} .first{color:green;} <p clas ...
- 【莫队算法】【权值分块】bzoj3920 Yuuna的礼物
[算法一] 暴力. 可以通过第0.1号测试点. 预计得分:20分. [算法二] 经典问题:区间众数,数据范围也不是很大,因此我们可以: ①分块,离散化,预处理出: <1>前i块中x出现的次 ...
- Codevs 1688 求逆序对(权值线段树)
1688 求逆序对 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 给定一个序列a1,a2,…, ...
- codevs1688 求逆序对(权值线段树)
1688 求逆序对 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 给定一个序列a1,a2,…, ...
- 权值线段树&&可持久化线段树&&主席树
权值线段树 顾名思义,就是以权值为下标建立的线段树. 现在让我们来考虑考虑上面那句话的产生的三个小问题: 1. 如果说权值作为下标了,那这颗线段树里存什么呢? ----- 这颗线段树中, 记录每个值出 ...
- CSS选择器优先级 CSS权值
计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1 ID的权值为 0,1,0,0 important的权值为最高 ...
- CSS权值
选择器权值 标签选择器:权值为1 类选择器和伪类:权值为10 ID选择器:权值为100 通配符选择器:权值为0 行内样式:权值为1000 !important规则: 可调整样式规则的优先级 添加在样式 ...
- HTML/CSS权值继承
<style type="text/css">p{color:red;}.first{color:green;}/*因为权值高显示为绿色*/ span{color:pi ...
随机推荐
- 微信小程序 错误记录
1.报错this.getUserInfo(this.setData) is not a function;at pages/index/index onShow function;at api req ...
- JS中判断某个字符串是否包含另一个字符串的五种方法
String对象的方法 方法一: indexOf() (推荐) ? 1 2 var str = "123" console.log(str.indexOf("2&qu ...
- android使用Pull解析来自服务器的xml文件时出现错误以及解决方案
直接上代码,代码中有详细注释: 1 public class CheckUpdateManager { 2 private static final String TAG = "CheckU ...
- 使用RSS订阅
1.绪论 对某一主题完成一次文献检索后,我们希望能持续了解该主题最新文献,即实现文献追踪. 为此,搜索引擎和数据库厂商(数据源)提供一般两种订阅服务:邮件和RSS.订阅后,数据源会自动推送最新信息,免 ...
- angular2.0学习笔记3.了解angular2.0项目结构
1.我们应用的代码都位于src文件中,包括所有的组件.模板.样式.图片以及我们的应用所需的任何东西都在这个文件来里. 2.src这个文件夹之外的文件都是为构建应用提供支持用的. src文件夹及用途说明 ...
- angular2.0学习笔记1.开发环境搭建 (node.js和npm的安装)
开发环境, 1.安装Node.js®和npm, node 6.9.x 和 npm 3.x.x 以上的版本. 更老的版本可能会出现错误,更新的版本则没问题. 控制台窗口中运行命令 node -v 和 n ...
- 一种基于URL数据源的WEB报表插件
完全支持所见所得的报表设计, 支持 PHP ,Java 等所有支持JSON格式的后端. 立即下载测试版本 需要正式版本?请QQ联系:1565498246 或者留言
- ajax异步请求该嵌套还是并列?
因为要查询两个数据库表才能确定我所需要的数据范围,所以前台js得发两次ajax请求.问题就是,这两个请求是嵌套着写:{发,接{发,接}}:还是并列着写:{发,接},{发,接} 好? 答案:如果2次aj ...
- oralce的lag和lead函数
https://www.cnblogs.com/always-online/p/5010185.html
- QueryRunner类的八种结果处理集
package cn.jy.demo; import java.sql.Connection; import java.sql.SQLException; import java.util.List; ...