css的优先级及复合选择器权重计算

css优先级

优先级公式

优先级：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

注意：如果加!important只提高加了的这个属性的优先级，而且其他的属性还是按照我们的优先级排列

Important例子：

 color: yellow !important;

1，Css继承的样式>默认的样式

2，通配符读选择器样式的优先级>继承的样式

3，标签选择器的优先级>通配符选择器的优先级

4，类选择器样式的优先级>标签选择器的优先

5，ID选择器优先级>类选择器的优先级

6，行内选择器的样式优先级>ID选择器的优先级

复合选择器权重的计算

(0 0 0 0)
            第一个零表示!important的个数
            第二个零表示ID选择器的个数
            第三个零表示类选择器的个数
            第四个零表示标签选择器的个数
            比较时：从第一个零开始，如果第一个零大，那么就是这个选择器的权重高
            如果大小相等，比较第二个“0”的大小，如果第二个零大那么这个选择器的权重高
            还相等，以此类推

最后：如果比较完后都相等，使用后面的样式

css的优先级及复合选择器权重计算相关推荐

CSS选择器权重计算与优先级
CSS选择器权重计算与优先级选择器有优先级,可以通过权重来计算优先级. 一:优先级等级划分: 第一优先级:css属性+!important是一种强制改变优先级的方法,它会覆盖页面内任何位置定义的元 ...
CSS基本知识之复合选择器、元素显示模式、背景图片位置，精灵图
CSS基本知识之复合选择器.元素显示模式.背景图片位置,精灵图一.复合选择器在 CSS 中,可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进 ...
html内容权重计算,HTML CSS 选择器权重计算规则
其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间我的行间CSS样式. 2.内联 h1{font-size: ...
CSS 选择器权重计算规则
CSS 选择器(Selector)的权重(Specificity)决定了对于同一元素,到底哪一条 CSS 规则会生效.且仅有当多条 CSS 规则都对同一元素声明了相应样式时,才会涉及到权重计算的问题. ...
CSS（二）——复合选择器、元素显示模式、背景、三大特性
文章目录 *1.Emmet语法 *1.1 快速生成HTML结构语法 *1.2 快速生成CSS样式语法 1.CSS 的复合选择器 1.1 什么是复合选择器 1.2 后代选择器 (重要) 1.3子选择器( ...
CSS 2 emmet语法复合选择器元素显示模式
目录 Emmet语法 1.1快速生成HTML结构标签 1.2快速生成CSS样式语法 CSS的复合选择器 1.1什么是复合选择器 1.2后代选择器(重要) 1.3子选择器(重要) 1.4并集选择器(重要 ...
使用css的类名交集复合选择器
首先先看一下基本定义: 复合选择器就是两个或多个基本选择器,通过不同方式连接而成的选择器,主要包括"交集"选择器."并集"选择器."后代"选 ...
WEB前端学习（3）CSS复习二（复合选择器+元素显示模式+ 背景）
一 CSS 复合选择器总结:复合选择器 1. 后代选择器后代选择器又称为包含选择器,可以选择父元素里面子元素.其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔.当标签发生嵌套时,内 ...
关于css媒体查询中的选择器权重的问题
@media中的选择器的优先级今天写响应式页面的时候发现了个问题在这里记录一下 .content .right-box {width: 240px;float: right; } 我写的页面是三栏式 ...
CSS第四篇(复合选择器)
1.后代选择器概念:后代选择器又称为包含选择器作用:用于选择元素或元素的子孙后代,一个标签之后的所有标签都会选择写法:把外层标签写在前面,内层标签写在后面,中间用空格隔开父级子级{属性:属性 ...

css的优先级及复合选择器权重计算

css的优先级及复合选择器权重计算相关推荐

最新文章

热门文章