Css权重解析

Css权重解析

关于CSS权重,我们需要一套计算公式来去计算,这个就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准 具体规范入如下:

specificity用一个四位的数 字串(CSS2是三位)来表示,更像四个级别,值从左到右,左面的最大,一级大于一级,数位之间没有进制,级别之间不可超越。

继承或者* 的贡献值

0,0,0,0

每个元素(标签)贡献值为

0,0,0,1

每个类,伪类贡献值为

0,0,1,0

每个ID贡献值为

0,1,0,0

每个行内样式贡献值

1,0,0,0

每个!important贡献值 重要的

∞ 无穷大

权重是可以叠加的

比如的例子:

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1   

#nav p       ----->       0,1,0,1

注意:

1.数位之间没有进制 比如说: 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0, 所以不会存在10个div能赶上一个类选择器的情况。

  1. 继承的 权重是 0

总结优先级:

  1. 使用了 !important声明的规则。
  2. 内嵌在 HTML 元素的 style属性里面的声明。
  3. 使用了 ID 选择器的规则。
  4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
  5. 使用了元素选择器的规则。
  6. 只包含一个通用选择器的规则。
  7. 同一类选择器则遵循就近原则。
总结:权重是优先级的算法,层叠是优先级的表现

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏拂晓风起

【HTML5 Canvas】计算元件/显示对象经过Matrix变换后在上级/舞台上的bounds(边界矩形rect)

1223
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之z-index

1、z-index基础   z-index含义:指定了元素及其子元素的”z顺序“,而”z顺序“可以决定元素的覆盖顺序。z-index值越大越在上面。   z-i...

3045
来自专栏前端知识分享

第98天:CSS3中transform变换详解

Transform字面上就是变形,改变的意思。在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动transla...

793
来自专栏腾讯IVWEB团队的专栏

SVG 动画精髓(上)

DR本文主要是讲解关于 SVG 的一些高级动画特效,比如 SVG 动画标签,图形渐变,路径动画,线条动画,SVG 裁剪等。例如:路径动画图形渐变:线条动画:以及...

7800
来自专栏前端桃园

Grid布局简介

没错,这其实就是我们小时候写的小格子本本,其实它跟我们今天要讲的主题Grid布局非常类似,其实Grid布局就是它的升级加强版。

1.2K7
来自专栏大数据挖掘DT机器学习

很棒的R语言回归模型和方差模型

对于初学者,利用R语言自带的数据进行练习是不错的选择,下面这些模型便是最好的实例。 1、回归模型 回归模型利用自带的faithful数据来示例,faithful...

4738
来自专栏天天P图攻城狮

iOS多边形马赛克的实现(上)

马赛克(英语:Mosaic)是镶嵌艺术的音译,原本是指一种装饰艺术,通常使用许多小石块或有色玻璃碎片拼成图案,在教堂中的玻璃艺品,又称为花窗玻璃(stained...

58411
来自专栏工科狗和生物喵

【机器视觉与图像处理】基于MATLAB+Hough的圆检测

本次文章,没有太多好写的,就是最近做的一个机器视觉的课程设计作业,是要做一个流水线的生产线建模以及对于产品的检测识别,我个人承包了圆心半径检测的内容,熬了好几天...

2941
来自专栏较真的前端

深入研究CSS字体度量及CSS 盒子

1653
来自专栏cnblogs

Css3新特性应用之过渡与动画

一、缓动效果 学习和利用贝塞尔曲线,默认支持ease,ease-in,ease-out,ease-in-out和linear等 还提供一个cubic-beize...

3107

扫码关注云+社区

领取腾讯云代金券