css第二篇:样式的特殊性、重要性、继承和层叠
特殊性:
假设有几个不同的规则改变的都是同一个元素的值,那么哪一个规则将会胜出呢?这就得靠特殊值啦,什么是特殊值呢?特殊值的大小呢?如下图:
值越大代表越牛,如1,0,0,0永远大于0,X,X,X。这边再举几个特殊例子:
html > body table tr[id="ddd"] > li {color:green} /* specificity = 0,0,1,5 [id="ddd"]的值为0,0,1,0*/
h1 + p { color:green} /* specificity = 0,0,0,2 */
h1 + p { color:green; font-size: 18px} /* specificity = 0,0,0,2 */
* {color:green} /* specificity = 0,0,0,0 */
<h1 style="color:green"} /* specificity = 1,0,0,0 内联样式值为1,0,0,0*/
重要性
有时某个声明很重要。这时就需要用重要声明。重要声明需要放在元素声明的后面,放在其他位置则没有效果。如:
bb.cc {color:"green" !important}
展现的时候,所有!important声明都会分在一组,重要声明特殊性也会在内部解决,把一个重要声明和其他声明比,重要声明总是会胜出。
继承
关于继承,如以下代码:
.ddd {font-size: 16px;}
<div class="ddd"><div class="ddd1"></div></div>
class为ddd1内的div内的font-size大小也全会为16px。继承的值没有特殊性,甚至连0特殊值都没,所以正常情况尽量避免用通配选择器,因为特殊值0,0,0,0也会比没特殊值更大, 若现在加一声明,如:
.ddd1 {font-size: 20px;}
则class为ddd1内的font-size都会为20px, 如果现在有这样的代码:
<div class="ddd"><div class="ddd1"><div class="ddd2"></div></div></div>
则class为ddd2的div内的font-size为20px,继承会采取就近原则进行匹配。
大多数的元素声明都会被继承,但框模型属性(包括外边距、内边距、背景和边框)基本不能被继承,如border属性。
层叠
如果特殊性相等的规则用到同一个元素上,结果又会是怎么样呢?如以下代码:
h1 {color: green;}
h1 {color: red;}
它们的特殊值都为0,0,0,1,权重相等,那么浏览器到底会用哪个规则呢?这时候我们就得看层叠规则啦,如下图:
首先我们来看第二点,在重要性的模块里,我们说过它的权重要高于其他声明,但是重要性标志又有三种来源:创作人员、读者、用户代理。
创作人员:即是开发人员,指的是开发人员给某元素添加了!important。
读者:即是用浏览器浏览网页的用户,可通过F12键给某元素添加!important。
用户代理: 即是浏览器,如某个浏览器可能会默认地给某元素添加!important。
总结一下,声明权重方面要考虑5级,权重由大到小顺序为:
1: 读者的重要声明
2: 创作人员的重要声明
3: 创作人员的正常声明
4: 读者的正常生命
5: 用户代理声明
其次我们来看第四点,像我们上面说的如:
h1 {color: green;}
h1 {color: red;}
这种情况,他们的权重值相等,两者也并没有!important声明,最终h1的color会为red。
也正是由于顺序排序,所以我们才有了通常推荐的链接样式顺序展开,如以下:
:link{color: blue;}
:visited{color: purple;}
:hover{color:red;}
:active{color:orange;}
......
以上则是我们今天讲的内容,下一章会开始讲Webpack相关的内容。
css第二篇:样式的特殊性、重要性、继承和层叠的更多相关文章
- Css的三大机制(特性):特殊性、继承、层叠详解
继承(Inheritance)是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用那些值时,用户代理(浏览器)不仅要考虑继承,还要考虑声明的特殊性(specificity),另外需要 ...
- CSS 特殊性、继承与层叠
一.特殊性规则 选择器的特殊性由选择器本身的组件确定:特殊性由四个部分组成,其初始值为0,0,0,0. 1. 对于选择器中的每一个id,记0,1,0,0: 2. 对于选择器中的每一个类.伪 ...
- CSS中的特殊性、继承、层叠
前言 最近在看<CSS权威指南>,书中第三章“结构和层叠”对特殊性的解释十分到位,今天就来整理下思路,记录如下. 初来乍到,有何不妥请多多指点,有时间的话顺便评论下,讨论讨论~ 引入问题
- CSS第二篇
给导航设置圆角的代码: c3 里面的属性:border-radius:7px: 1补充盒子问题 (盒子边框紧邻变粗问题)将两个盒子边框重叠并且设置定位提高层级避免盒子重叠,鼠标放上去只显示一个盒子的边 ...
- Vue.js学习笔记 第二篇 样式绑定
Class绑定的对象语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- html+css第二篇
<img src="图片地址" alt="图片名"/> 图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用: a标签: 链接/下载/锚点 ...
- html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版
继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...
- CSS——NO.4(继承、层叠、特殊性、重要性)
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...
- CSS中的层叠、特殊性、继承、样式表中的@import
CSS中的层叠.特殊性.继承.样式表中的@import 层叠 CSS有一个机制是层叠,层叠可以理解为对样式的覆盖,优先性为: 网站开发者的样式表 用户样式(通过设置浏览器的显示选项) 浏览器默认的样式 ...
随机推荐
- 最小生成树 prim
1.算法思想: 图采用邻接矩阵存储,贪心找到目前情况下能连上的权值最小的边的另一端点,加入之,直到所有的顶点加入完毕. 2.算法实现步骤: 设图G =(V,E),其生成树的顶点集合为U. (1)把v0 ...
- Python将阿拉伯数字转化为中文大写-乾颐堂
利用Python将阿拉伯数字转化为中文大写,其实最麻烦的地方就是中间空多个0的问题,这种情况下,采用拆分法则,将一个大数字,先拆分成整数部分和小数部分,再对整数部分按照仟.万.亿.兆分位拆分为四个字符 ...
- Spring查询方法的注入 为查询的方法注入某个实例
//这里是客户端的代码 当调用CreatePersonDao这个抽象方法或者虚方法的时候由配置文件返回指定的实例 为查询的方法注入某个实例 start static void Main(string[ ...
- Java Persistence with MyBatis 3(中文版)
译者的话 前段时间由于工作和学习的需要,我打算深入研究MyBatis框架.于是在网上查找关于MyBatis的教程,发现国内网上关于MyBatis的教程资料少得可怜:除了MyBatis官网上的用户使用手 ...
- PreparedStatement的setDate方法如何设置日期
pstmt.setString(12, "to_char(sysdate,'YYYY-MM-DD HH24:MI:SS')");这样写不对,应该如何写 该方法用于将指定的参数设置为 ...
- 8、Semantic-UI之其他按钮样式
8.1 其他按钮样式定义 示例:定义其他按钮样式 定义圆形图标按钮样式 <div class="ui circular icon button"><i class ...
- Linux RPM学习笔记
RPM(RedHat Package Manager) rp-pppoe-3.1-5.i386.rpm软件名称-版本号-编译次数-适合的硬件平台.扩展名 xxx-devel.rpm开发使用 xxx.n ...
- 20145233《网络对抗》Exp5 MSF基础应用
20145233<网络对抗>Exp5 MSF基础应用 实验问题思考 什么是exploit,payload,encode exploit是发现了的可以利用的安全漏洞或者配置弱点,这类模块存储 ...
- 免费的API
https://www.jianshu.com/p/e6f072839282 目前接口列表: 新实时段子 https://api.apiopen.top/getJoke?page=1&coun ...
- Python短路原则
1.括号内逻辑先执行 2.and优先级大于or 3.and一假为假 4.or一真为真 and:如果左边为假,返回左边值.如果左边不为假,返回右边值. or:如果左边为真,返回左边值.如果左边不为真,返 ...