css三大特性及权重说明
一、三大特性简述
层叠性: 后来的覆盖前面的 (长江后浪推前浪)
继承性: 子标签会继承父标签的某些样式 (跟文字有关的一般都会继承)
优先级: 设计到一个算法“css特殊性(Specificity)”
specificity用一个四位的数来表示,从左到右 左面的值最大,数位之间没有进制级别之间不可超越
继承或者*的贡献值 0,0,0,0
每个元素(标签)贡献值为0,0,0,1
每个类,伪类的贡献值 0,0,1,0
每个ID的贡献值为 0,1,0,0
每个行内样式贡献值 1,0,0,0
每个!important 无穷大
!important的用法
div { color: red!important;
}
二、优先级高低总结
相等价的时候取就近原则
权重可叠加叠加 1.使用了!important申明的规则
2.内嵌在HTML元素的style属性里面的申明
3.使用了ID选择器的规则
4.使用了类选择器、属性选择器、伪元素和伪类选择器
5.使用了元素选择器的规则
6.只包含一个通用选择器的规则
7.同一类选择器则遵循就近原则
css三大特性及权重说明的更多相关文章
- CSS三大特性及权重叠加
层叠性: 1.样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式 2.样式不冲突,不会层叠 继承性: 子标签会继承父标签的某些样式,如文本颜色和字号 优先级: 当同一个元素指定多个选择器 ...
- CSS.02 -- 样式表 及标签分类(块、行、行内块元素)、CSS三大特性、背景属性
样式表书写位置 内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...
- Css - 三大特性
css - 三大特性 1.层叠性 如果通过两个相同选择器设置了同一个元素的某个相同的css属性,按照css相同属性的出现顺序,后面的样式会覆盖前面的样式 2.继承性 祖先元素的关于文本的样式会遗传给后 ...
- CSS三大特性(继承、优先级、层叠)之个人见解
首先声明一下CSS三大特性——继承.优先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开 ...
- CSS 三大特性 层叠 继承 优先级
css三大特性 层叠性: 如果一个属性通过两个相同选择器设置到同一个元素上,相同的属性就会出现冲突,那么这个时候一个属性就会将另一个属性层叠掉,采用的是就近原则 继承性: 子标签会继承父标签的某些样式 ...
- python 之 前端开发(CSS三大特性、字体属性、文本属性、背景属性)
11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性2.注意: 1.只有以color.font-.text-.l ...
- 前端面试 CSS三大特性
CSS的三大特性 1.层叠性 代码由上向下执行,相同选择器设置到同一元素上,样式冲突的,会执行比较靠近html的样式,样式不冲突的情况下不影响 代码如下 <!DOCTYPE html> & ...
- css三大特性 & 选择器的权重
层叠性 层叠性是指当一个标签被设置了多个重复的样式的时候会发生冲突,一个属性会覆盖另外一个属性. 覆盖性原则: 层叠性主要遵循的原则是就近原则,在不考虑优先级的情况下,在多个样式中最终生效的样式是离标 ...
- CSS系列 (03):CSS三大特性
层叠性 层叠性指的是样式的优先级,当产生冲突时以优先级高的为准,优先级相同时取后面定义的属性样式. 继承性 继承性指的是子孙元素可以继承父元素的属性. 记录一下开发中常用的继承属性: 字体系列 fon ...
随机推荐
- 【matlab】模拟变焦拼接代码备份
1.初版,边缘未处理. % % In----near % If----far % In=imread('D:\文件及下载相关\桌面\模拟变焦拼接\Matlab_code\nearframe\frame ...
- 免费的HTML5版uploadify
转http://www.cnblogs.com/lvdabao/p/3452858.html var defaults = { fileTypeExts:'',//允许上传的文件类型,格式'*.jpg ...
- 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_8.RabbitMQ研究-工作模式-发布订阅模式-生产者
Publish/subscribe:发布订阅模式 发布订阅模式: 1.每个消费者监听自己的队列. 2.生产者将消息发给broker,由交换机将消息转发到绑定此交换机的每个队列,每个绑定交换机的队列都将 ...
- 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_17-CMS前端工程创建-单页面应用介绍
查看运行起来的页面的源代码 这个webpck打包生成的文件. 单页面应用的优缺点: 优点: 1.用户操作体验好,用户不用刷新页面,整个交互过程都是通过Ajax来操作. 2.适合前后端分离开发,服务端提 ...
- String字符串的截取
根据某个字段将字符串分割成绩部分 String str = "string number one 1/9/0"; //将字符串由/ 截取成绩部分 String[] strs = s ...
- HAProxy+Keepalived 高可用负载均衡
转自 https://www.jianshu.com/p/95cc6e875456 Keepalived+haproxy实现高可用负载均衡 Master backup vip(虚拟IP) 192.16 ...
- PyToune:一款类Keras的PyTorch框架
PyToune is a Keras-like framework for PyTorch and handles much of the boilerplating code needed to t ...
- Salt之CentOS7.5使用RPM包安装MySQL5.7.22
手动安装参考CentOS7.5使用RPM包安装MySQL5.7.22 目录结构为 install.sls文件 #按顺序分别安装commin libs client server #避免冲突安装comm ...
- C语言字符串之无重复字符的最长子串
题目描述 给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 输入: "abcabcbb" 输出: 解释: 因为无重复字符的最长子串是 . 输入: " ...
- [LuoguP3064][USACO12DEC]伊斯坦布尔的帮派Gangs of Istanbull(加强版)_线段树_贪心
伊斯坦布尔的帮派Gangs of Istanbull 题目链接:https://www.luogu.org/problem/P3064 数据范围:略. 题解: 这个题其实分为两问,第一问是$YES$. ...