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有一个机制是层叠,层叠可以理解为对样式的覆盖,优先性为: 网站开发者的样式表 用户样式(通过设置浏览器的显示选项) 浏览器默认的样式 ...
随机推荐
- 1.在VC编译器下面为什么每个头文件以及源文件都要包含“stdAfx.h”,那么stdAfx.h中到底存放了什么,用来做什么?
我们知道在windows平台下面很多的文件后缀名中都含有Afx,其实Afx是微软公司的一个技术研发团队名称,vc下的“stdAfx.h”和“stdAfx.cpp”文件就是有他们所研发出来的,为什么要这 ...
- web.xml配置详解[转]
引文: 对于一个J2EE领域的程序员而言,基本上每天都会和web应用打交道. 什么是web应用?最简单的web应用什么样?给你一个web应用你该从何入手? 1.什么是web应用? web应用是一种可以 ...
- tp5 whereOr
题目:查询grade=1 or class=2 or sex=3的学生 $condition[; $condition[; $condition[; $list =Db::name($this-> ...
- Java Persistence with MyBatis 3(中文版) 第五章 与Spring集成
MyBatis-Spring是MyBatis框架的子模块,用来提供与当前流行的依赖注入框架Spring的无缝集成. Spring框架是一个基于依赖注入(Dependency Injection)和面向 ...
- Selenium模拟浏览器初识
Seleniumd介绍 在写Python爬虫的时候,最麻烦的不是那些海量的静态网站,而是那些通过JavaScript获取数据的站点.Python本身对js的支持不好,所以就有良心的开发者来做贡献了,这 ...
- up7-文件保存位置
asp.net 默认位置:项目/upload/年/月/日/guid/ 代码截图: 位置截图: jsp 默认位置:tomcat/webapps/Uploader7Oracle/upload/年/月/ ...
- 20169214 2016-2017-2 《网络攻防实践》第十一周实验 SQL注入
20169214 2016-2017-2 <网络攻防实践>SQL注入实验 SQL注入技术是利用web应用程序和数据库服务器之间的接口来篡改网站内容的攻击技术.通过把SQL命令插入到Web表 ...
- jmeter 读取多个用户名并同时发
在运营活动测试过程中,经常需要对秒杀活动或定时抽奖活动进行并发测试.那么怎样快速便捷的模拟多用户同时参与活动,抽取奖品,进行并发测试呢?尤其是,当奖品总数N<用户总数M时,代码是否会存在奖品多发 ...
- 大致(主要hadoop)软件下载地址
jdk-8u181-linux-x64.tar.gz https://www.oracle.com/technetwork/java/javase/downloads/index.html hadoo ...
- 理解Javascript中的事件绑定与事件委托
最近在深入实践js中,遇到了一些问题,比如我需要为动态创建的DOM元素绑定事件,那么普通的事件绑定就不行了,于是通过上网查资料了解到事件委托,因此想总结一下js中的事件绑定与事件委托. 事件绑定 ...