css选择器的权重问题

2024-08-27

css选择器权重问题

important infinity 行间样式 1000(256进制) id 100 class/属性/伪类 10 标签/伪元素 1 通配符 0

我们做项目的时候,经常遇到样式层叠问题,被其他的样式覆盖,或者写的权重不高没效果,对权重没有具体的分析,做了一个总结. css继承是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用哪些值时,浏览器不仅要考虑继承,还要考虑声明的特殊性,另外需要考虑声明本身的来源.这个过程就称为层叠.——<css权威指南> 如下图,css规则由选择器和声明块组成,写在选择器后面大括号里的就叫声明.

常见CSS选择器的权重和优先级

一.常见CSS选择器 [元素选择器] 1.通配选择器:*(匹配所有元素) a.效率不高,页面上的标签越多,效率越低,所以页面上最好不要出现这个选择器 2.标签选择器:li(匹配标签为li的元素) a.所有标签都能够当做选择器,比如body.h1.dl.ul.span等等 b.不管这个标签藏的多深,都能够被选择上 c.选择的是所有的,而不是某一个.所以是共性,而不是特性 3.ID选择器:#content(匹配ID属性值等于content的元素) 4.类选择器:.list(匹配class属性包含li

CSS选择器的权重与优先规则

权重顺序 “important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”. 原文:http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php 我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们.那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会根

CSS选择器及其权重

#转载请留言联系 1.标签选择器标签选择器,此种选择器影响范围大,一般用来做一些通用设置,或用在层级选择器中.举例: div{color:red} ...... <div>这是第一个div</div>  <div>这是第二个div</div>  2.类选择器通过类名来选择元素,一个类可应用于多个元素,一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选

css选择器的权重

权重会叠加!

CSS选择器的权重与优先规

我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值. 4个等级的定义如下: 第一等:代表内联样式,如: style=””,权值为1000. 第二等:代表ID选择器,如:#content,权值为100. 第三等:代表类,伪类和属性选择器,如.content,权值为10. 第四等:代表类型选择器和伪元素选择器,如div p,权值为1. 例如上图为例,其中#NAV为二等选择器,.ACTIVE为三等选择器,U

css选择器权重、样式继承、默认样式

学过css的小伙伴都是指css选择器的权重 !important Infinity 行间样式 1000 id 100 class|属性|伪类 10 标签|伪元素 1 通配符 0 权重相同相同css文件:写在后面的起作用不同css文件:后导入的起作用但今天遇到一个问题 <body> <div style="color: red"> <span>123</span> </div> </body> 却是这样的

css优先级和权重

1. 权重概念: 权重,是一个相对的概念,是针对某一指标而言.某一指标的权重是指该指标在整体评价中的相对重要程度. 权重系数,是表示某一指标项在指标项系统中的重要程度,它表示在其它指标项不变的情况下,这一指标项的变化,对结果的影响. 2.css权重的理解: 每一个css的选择器都有一个相对的重要程度值,也就是权重的值,简称"权值": css通过css选择器的权重占比,来计算css选择规则的总权值,从而确定定义样式规则的优先级次序: 从"css权重的理解"中得知,

前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前端群里还发现以上观点类似的奇葩聊天,真是*** 其实,也是在很久以前,看了腾讯ISUX的一位前端工程师-麦时分享的一篇技术文章(个人站点已失效,就不贴出来了),才了解到真正的css选择器权重计算. 以下是css选择器权重计算精华所在,翻译自国外的文档(记得是W3C给出的计算规则) 如果一个声明来自s

css：id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器

最近的项目要自己写前端了,重新学习下前端的一下基本知识. 一般在css样式表中,上面的会被下面的覆盖,如下图,文字会显示蓝色: 所以按照正常的来说,下面的css样式,测试的文字应该还是蓝色但结果,测试文字显示黄色,标签选择器的结果被属性选择器覆盖了,起作用的是属性选择器结论:id选择器的权重>class选择器的权重=属性选择器的权重>元素选择器(id选择器和class选择器可以自行验证), 一般相等权重的按位置覆盖,不同权重的选择器,位置变了也不会覆盖

CSS选择器权重计算

CSS各种选择器的权重: 1.ID选择器 +100 2.类.属性.伪类选择器 +10 3.元素.伪元素选择器 +1 4.其他选择器 +0 如果有两个CSS样式都作用于某元素,如: #id .link a[href] ----- #id(100) + .link(10) +a(1) + [href](0) = 111 #id .link.active ----- #id(100) + .link(10) + .active(10) = 120 显然,下面的权重比上面的高,那么如果有相

css复合选择器的权重

选择器的权重标签选择器的权重为0001 class选择器的权重为0010 id选择器的权重为0100 属性选择器的权重为0010 伪类选择器的权重为0010 伪元素选择器的权重为0010 包含选择器的权重:所包含选择器的权重之和子选择器的权重:所包含选择器的权重之和交集选择器权重为选择器之和继承样式的权重为0000 行内样式的权重为1000 测试 <html> <head> <title>DOM Tests</title> <style>

CSS选择器的优先级及权重问题【CSS核心问题】及其它属性

1.CSS选择器优先级: !important >行间样式> id >class和属性选择器>标签选择器>通配符选择器注意:[初级工程师水平] 2.之所以有优先级问题,归根到底是这些选择器有权重的,权重值越大,优先级越高!如下所示: !important Infinity[正无穷] 行间选择器 1000[权重]

HTML+css基础 css选择器选择器的权重

css选择器选择器的权重在css中,哪个选择器的权重高,就走谁的样式标签选择器的权重是1 class选择器的权重是10 Id选择器的权重是100 行间样式的权重是1000 带有关键字 !important 的css属性权重是无穷大

CSS选择器权重计算规则

从CSS代码存放位置看权重优先级:内嵌样式 > 内部样式表 > 外联样式表.其实这个基本可以忽视之,大部分情况下CSS代码都是使用外联样式表. 从样式选择器看权重优先级:important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符. important的权重为1,0,0,0 ID的权重为0,1,0,0 类的权重为0,0,1,0 标签的权重为0,0,0,1 伪类的权重为0,0,1,0 属性的权重为

css三大特性 & 选择器的权重

层叠性层叠性是指当一个标签被设置了多个重复的样式的时候会发生冲突,一个属性会覆盖另外一个属性. 覆盖性原则: 层叠性主要遵循的原则是就近原则,在不考虑优先级的情况下,在多个样式中最终生效的样式是离标签最近的样式这里要注意只覆盖同样的不可重复的样式属性,不会覆盖允许重复的属性示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document&

css选择器的使用详解

-.css选择器的分类: 二.常用选择器详解: 1.标签选择器: 语法: 标签名 { 属性:属性值; } 代码示例: h1 { color: #ccc; font-size: 28px; } 2.类选择器: 语法: .类名 { 属性:属性值: } 代码示例: .top { margin-top:25px; } <div class="top"></div> 3.id选择器: 语法: #ID名称 { 属性:属性值; } 代码示例: #top { padding-t

CSS选择器优先级总结

CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类首先来看一下css选择符(css选择器)有哪些? 1.标签选择器(如:body,div,p,ul,li) 2.类选择器(如:class="head",class="head_logo") 3.ID选择器(如:id="name",id="name_t

CSS选择器、CSS hack及CSS执行效率

主要内容: 1.CSS选择器.优先级与匹配原理 2. CSS 引入的方式有哪些 ? link 和 @import 的区别是 ? 3.CSS hack 4.如何书高效CSS 一.CSS选择器.优先级与匹配原理 CSS选择器大概可以分为:1.id选择器(#myid) 2.类选择器(.myclassname) 3.标签选择器(div,h1,p) 4.相邻选择(h1+p)6.后代选择器(li a)7.通配符选择器(*) 8.属性选择器(a[rel='externaml']) 9.伪类选

CSS选择器优先级 CSS权值

计算指定选择器的优先级:重新认识CSS的权重标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1 ID的权值为 0,1,0,0 important的权值为最高 1,0,0,0 使用的规则也很简单,就是选择器的权值加到一起,大的优先:如果权值相同,后定义的优先 .虽然很简单,但如果书写的时候没有注意,很容易就会导致CSS的重复定义,代码冗余. 从上面我们可以得出两个关键的因素: 权值的大小跟选择器的类型和数量有关样式的优先级跟样式的定义顺序有关总结: