css优先级计算

主要的css选择器有id,class,tag,[],:,::等,而通常需要对其优先级进行判断的有id,class,tag,另外内联样式和!important也和css的优先级有关系。

如果将这五种不同情况的优先级以数字的形式来表示的话,其对应关系如下:

!important(10000) > 内联样式(1000) > id(100) > class(10) > tag(1)

则通常的css优先级比较可转化为数值大小的比较,如:#list li和.list .content ul li,其优先级为:

100+1=101 > 10+10+1+1=22

前者的优先级大于后者。

时间: 2024-10-25 01:55:53

css优先级计算的相关文章

css优先级计算规则

原文:css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没有然后了……,ID选择器的优先级确实>class选择器的优先级>元素选择器的优先级,但是外联样式优先级并不一定低于内联样式优先级.做为一个合格的前端工程师,让我们彻底搞清楚css优先级计算规则吧! 特殊性 css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用哪些值时,浏

关于CSS的优先级,CSS优先级计算

原则一: 继承不如指定原则二: #id > .class > 标签选择符原则三:越具体越强大原则四:标签#id >#id ; 标签.class > .class CSS优先级权重计算法 CSS优先级包含四个级别(标签内选择符,ID选择符,Class选择符,元素选择符)以及各级别出现的次数! 根据这四个级别出现的次数计算得到CSS的优先级. CSS优先级的计算规则如下:* 元素标签中定义的样式(Style属性),加1,0,0,0* 每个ID选择符(如 #id),加0,1,0,0* 每

浅谈CSS优先级机制(一)

初次写随笔,如果有哪个地方不足还望大神指点改正,下面我来谈谈我对于CSS优先级的了解吧. CSS优先级,通俗的理解就是你给元素等一堆属性描述,然后最后到底是哪个描述作为最终显示的效果的规则或机制(个人理解).以下我将分为几个点来谈谈优先级的确定. 1.引入方式: CSS引入的方式,我目前只知道四种:内联式.内嵌式.导入式.链接式(当然网上的说法名称不一,理解就好). 各种引入方式的用法我在这里就不再多说了.以上我所按顺序罗列的四个方式是理论上的优先级顺序,也就是说,我使用内联式引入的css代码作

css优先级汇总

我所理解的css优先级:当两个或者多个样式作用于同一个元素时,就会出现css优先级的问题. 多重样式优先级:当内联样式.内部样式和外部样式作用于同一个元素时,属于多重样式的范畴.优先级的顺序为内联样式>内部样式>外部样式. <head> <link href="style.css" rel="stylesheet" type="text/css" /> /*.color{color:red;}外部样式*/ &l

css优先级机制

所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 1.important >(内联样式)Inline style  >(内部样式)Internal style sheet >(外部样式)External style sheet (有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式.) 2.CSS选择器优先级:id选择器优先级 > 类class选择器优先级 > 标签选择器优先级 1.文内的样式优先级为1,0,0,0,所以始终高于外部定义.

CSS/优先级

css的优先级 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序. 样式表中的特殊性描述了不同规则的相对权重,它的基本规则是: 1 内联样式表的权值最高               style=""------------1000: 2 统计选择符中的ID属性个数.       #id --------------100 3 统计选择符中的CLASS属性个数. .class -------------10 4 统计选择符中的HTML标签名个数. p ------------

css优先级判断

概念 浏览器是通过判断优先级,来决定到底哪些属性值是与元素最相关的,从而应用到该元素上.优先级是由选择器组成的匹配规则决定的. 如何计算? 优先级是根据由每种选择器类型构成的级联字串计算而成的. 它不是一个对应相应匹配表达式的权重值. 如果优先级相同,元素最终会应用 CSS 中靠后的声明. 注意: 在文档树中的距离是不会对元素优先级计算产生影响的.(可以看文档中无视DOM树中的距离的例子) 优先级顺序 下列是一份优先级逐级增加的选择器列表: 通用选择器* 元素(类型)选择器 类选择器 属性选择器

CSS优先级详解(权重详解)

CSS选择器权重值的计算 对于Css权重,现在网上很多版本都是这样计算的:内联样式1000点,ID100点,Class.伪类(pseudo-classes)或属性选择器10点,标签元素和伪元素(pseudo-elements)1点:虽然大多数时候是正确的但因为真正的原理并非如此,所以某些情况下会出错. css权重有ABCD四个值,A代表行间样式,B代表选择器中ID的数量,C代表选择器中类, 伪类, 属性选择器的数量,D代表标签元素和伪元素的数量. 具体理解请看例子: * {} A,B,C,D(0

CSS优先级算法是如何计算?

CSS的specificity特性或非凡性,它是一个衡量css优先级的一个标准, 既然的标准就有判定规定和计算方式,specificity用一个四位数来表示, 更像四级从左到右,左的最大级,一级大于一级,数位之间没有进制, 多个选择符用到同一个元素上时那么specificity上值高的最终获得优先级. css specificity 规则 1.行内样式优先级specificity值为1,0,0,0 高于外部定义 如<div style="height:50px; width:50px;&q