特殊性:

  假设有几个不同的规则改变的都是同一个元素的值,那么哪一个规则将会胜出呢?这就得靠特殊值啦,什么是特殊值呢?特殊值的大小呢?如下图:

值越大代表越牛,如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第二篇:样式的特殊性、重要性、继承和层叠的更多相关文章

  1. Css的三大机制(特性):特殊性、继承、层叠详解

    继承(Inheritance)是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用那些值时,用户代理(浏览器)不仅要考虑继承,还要考虑声明的特殊性(specificity),另外需要 ...

  2. CSS 特殊性、继承与层叠

    一.特殊性规则 选择器的特殊性由选择器本身的组件确定:特殊性由四个部分组成,其初始值为0,0,0,0. 1.    对于选择器中的每一个id,记0,1,0,0: 2.    对于选择器中的每一个类.伪 ...

  3. CSS中的特殊性、继承、层叠

    前言 最近在看<CSS权威指南>,书中第三章“结构和层叠”对特殊性的解释十分到位,今天就来整理下思路,记录如下. 初来乍到,有何不妥请多多指点,有时间的话顺便评论下,讨论讨论~ 引入问题

  4. CSS第二篇

    给导航设置圆角的代码: c3 里面的属性:border-radius:7px: 1补充盒子问题 (盒子边框紧邻变粗问题)将两个盒子边框重叠并且设置定位提高层级避免盒子重叠,鼠标放上去只显示一个盒子的边 ...

  5. Vue.js学习笔记 第二篇 样式绑定

    Class绑定的对象语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. html+css第二篇

    <img src="图片地址" alt="图片名"/> 图片(单标签)alt属性 是图片名字,是给百度搜索引擎抓取使用: a标签: 链接/下载/锚点 ...

  7. html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版

    继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...

  8. CSS——NO.4(继承、层叠、特殊性、重要性)

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  9. CSS中的层叠、特殊性、继承、样式表中的@import

    CSS中的层叠.特殊性.继承.样式表中的@import 层叠 CSS有一个机制是层叠,层叠可以理解为对样式的覆盖,优先性为: 网站开发者的样式表 用户样式(通过设置浏览器的显示选项) 浏览器默认的样式 ...

随机推荐

  1. 最小生成树 prim

    1.算法思想: 图采用邻接矩阵存储,贪心找到目前情况下能连上的权值最小的边的另一端点,加入之,直到所有的顶点加入完毕. 2.算法实现步骤: 设图G =(V,E),其生成树的顶点集合为U. (1)把v0 ...

  2. Python将阿拉伯数字转化为中文大写-乾颐堂

    利用Python将阿拉伯数字转化为中文大写,其实最麻烦的地方就是中间空多个0的问题,这种情况下,采用拆分法则,将一个大数字,先拆分成整数部分和小数部分,再对整数部分按照仟.万.亿.兆分位拆分为四个字符 ...

  3. Spring查询方法的注入 为查询的方法注入某个实例

    //这里是客户端的代码 当调用CreatePersonDao这个抽象方法或者虚方法的时候由配置文件返回指定的实例 为查询的方法注入某个实例 start static void Main(string[ ...

  4. Java Persistence with MyBatis 3(中文版)

    译者的话 前段时间由于工作和学习的需要,我打算深入研究MyBatis框架.于是在网上查找关于MyBatis的教程,发现国内网上关于MyBatis的教程资料少得可怜:除了MyBatis官网上的用户使用手 ...

  5. PreparedStatement的setDate方法如何设置日期

    pstmt.setString(12, "to_char(sysdate,'YYYY-MM-DD HH24:MI:SS')");这样写不对,应该如何写 该方法用于将指定的参数设置为 ...

  6. 8、Semantic-UI之其他按钮样式

    8.1 其他按钮样式定义 示例:定义其他按钮样式 定义圆形图标按钮样式 <div class="ui circular icon button"><i class ...

  7. Linux RPM学习笔记

    RPM(RedHat Package Manager) rp-pppoe-3.1-5.i386.rpm软件名称-版本号-编译次数-适合的硬件平台.扩展名 xxx-devel.rpm开发使用 xxx.n ...

  8. 20145233《网络对抗》Exp5 MSF基础应用

    20145233<网络对抗>Exp5 MSF基础应用 实验问题思考 什么是exploit,payload,encode exploit是发现了的可以利用的安全漏洞或者配置弱点,这类模块存储 ...

  9. 免费的API

    https://www.jianshu.com/p/e6f072839282 目前接口列表: 新实时段子 https://api.apiopen.top/getJoke?page=1&coun ...

  10. Python短路原则

    1.括号内逻辑先执行 2.and优先级大于or 3.and一假为假 4.or一真为真 and:如果左边为假,返回左边值.如果左边不为假,返回右边值. or:如果左边为真,返回左边值.如果左边不为真,返 ...