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 ...
随机推荐
- [转][C#].Net反编译利器
来自:https://www.cnblogs.com/zsuxiong/p/5117465.html 有以下8款非常不错的.Net反编译利器: 1.Reflector Reflector是最为流行的. ...
- java多线程面试题整理及答案(2019年)
1) 什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器编程,你可以使用多线程对 运算密集型任务提速.比如,如果一个线程完 ...
- Objective-C中的self与LLVM Clang新引入的instancetype
我们知道,大部分面向对象语言对于一个类的成员方法都有一个隐含的参数.在C++.Java.C#和JavaScript中是this,而在Objective-C中则是self.当然,由于Objective- ...
- Qt编写自定义控件33-图片切换动画
一.前言 在很多看图软件中,切换图片的时候可以带上动画过渡或者切换效果,显得更人性化,其实主要还是炫一些,比如百叶窗.透明度变化.左下角飞入等,无论多少种效果,核心都是围绕QPainter来进行,将各 ...
- [Scikit-learn] 2.3 Clustering - Spectral clustering
From: 2.3.5 Clustering - Spectral clustering From: 漫谈 Clustering (4): Spectral Clustering From: 漫谈 C ...
- OpenStack Manila发展动态系列--Austin峰会
1 Manila Mitaka版本概述 在Austin峰会上介绍到,Manila Mitaka发布版本Driver个数达到了18个, M版本新加入14家公司(中国公司继华为之后又有99cloud等公司 ...
- MATLAB绘图及例子总结
MATLAB绘图及例子总结 二维图 例 1 X1=[1,2,4,6,7,8,10,11,12,14,16,17,18,20]; Y1=[1,2,4,6,7,8,10,10,8,7,6,4,2,1]; ...
- rabbitmq-BasicReject
拒收,是接收端在收到消息的时候响应给RabbitMQ服务的一种命令,告诉服务器不应该由我处理,或者拒绝处理,扔掉.接收端在发送reject命令的时候可以选择是否要重新放回queue中.如果没有其他接收 ...
- 360安全卫士11.0史上最小版发布,去流氓,最精简,300MB内存轻松运行。完全不拖慢电脑的速度,由王宁诚意发布。
360安全卫士11.0史上最小版发布,也是史上最快版本.大家可能都不喜欢360,为什么?因为360太流氓,而大家想过如果360去掉了流氓会怎么样?对,那样360就会变成一个性能可以超过知名杀毒软件-s ...
- Go语言入门篇-gRPC基于golang & java简单实现
一.什么是RPC 1.简介: RPC:Remote Procedure Call,远程过程调用.简单来说就是两个进程之间的数据交互. 正常服务端的接口服务是提供给用户端(在Web开发中就是浏览器)或者 ...