css选择器、权重

基础选择器

一、标签选择器

p{。。。}  h1{…..}   css不区分大小写,建议小写

1、所有的标签都可以作为标签选择器去使用

2、无论这个标签藏多深,一定能够被选上

3、选择页面所有的,而不是具体某一个;

标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某一个元素的“个性”的。

二、id选择器

所有的标签都可以有id属性来标识标签。

Id属性的值:

1)只能是数字字母下划线,必须以字母开头 ,不能和标签同名。

2)一个页面中不能出现相同的id,哪怕他们不是一个类型。

具有唯一性

id的优先级大于class

三、类选择器

.就是类的符号。类的英语叫做class,任何标签都可以有class属性

1)class属性是可以重复的,2)同一个标签可以同时属于多个类选择器,切记,一个标签内不能出现两个同名属性

1、在开发时,尽量不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同造成这个标签的样式。

2、 每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。

到底用id还是用class?

答案:尽可能的用class,除非极特殊的情况可以用id。

原因:id是js用的。也就是说,js要通过id属性得到标签,所以我们css层面尽量不用id,要不然js就很别扭。另一层面,我们会认为一个有id的元素,有动态效果。

Css高级选择器

一、后代选择器

空格就表示后代,如:div1 p{}选中div1的后代所有的p。

强调一下,选择的是后代不一定是儿子。

后代选择器就是一种平衡:共性、特性的平衡,共性中的特性。当要设置某一部分整体样式时,可以使用后代选择器。

后代选择器描述的是祖先结构

二、交集选择器

h3.special{

color:red;

}

选择的元素是同时满足两个条件:必须是h3标签,然后是special。

一般标签放在前面。交集选择器没有空格。

三、并集选择器(分组选择器)

用逗号表示并集。

例:h3,li{

color:red;

}

四、通配符*

*就表示所有元素。效率不高,尽量要少用

五、儿子选择器

IE7开始兼容,IE6不兼容

>号

六、序选择器

IE8开始兼容;IE6,7不兼容

序选择器指first-child和last-child

ul li:first-child{

color:red;

}

ul li:last-child{

color:blue;   }

七、下一个兄弟选择器

IE7开始兼容,IE6不兼容

+表示选择下一个兄弟

h3+p{

color:red;

}

选择上的是h3元素后面紧挨着的第一个兄弟。

选择器可以组合使用。

继承性

当给自己设置样式时,自己的后代都继承上了,这个就是继承性

哪些属性能继承?

color、 text-开头的、line-开头的、font-开头的。

这些关于文字样式的,都能够继承;所有关于盒子的、定位的、布局的属性都不能继承。

继承性是从自己开始,直到最小的元素。

层叠性

层叠性就是css处理冲突的能力。所有的权重计算,没有任何兼容问题!

当选择器,选择上了某个元素的时候,那么要这么统计权重:

id的数量,类的数量,标签的数量

百位             十位                    个位

不进位,实际上能进位(255个标签等于一个类名)但没有实际意义!

当权重相同时,谁在后以谁为准。

如果不能直接选中某个元素,通过继承的,权重值为0,

如果权重值都为0时,也就是继承来的,那么就按就近原则,谁描述的近,听谁的。             并集选择器权重要拆开计算,

权重问题大总结:

1) 先看有没有选中,如果选中了,那么以(id数,类数,标签数)来计权重。谁大听谁的。如果都一样,听后写的为准。

2) 如果没有选中,那么权重是0。如果大家都是0,就近原则。

权重问题深入

一、一个标记可以携带多个类名,标签样式并不是和类名顺序有关,而是和css样式书写顺序有关、

二、!important标记

1)!important是给标记属性添加权重,(无穷大)

font-size:60px !important;

注意:增加的属性的权重值,而不是选择器、

2)无法提升继承的权重

3)!important不影响就近原则

如果大家都是继承来的,按理说应该按照“就近原则”,那么important能否影响就近原则呢?

答案是:不影响。远的,永远是远的。不能给远的写一个important,干掉近的。

三、权重问题总结

时间: 2024-10-24 23:11:52

css选择器、权重的相关文章

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

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

CSS 选择器权重计算规则

CSS 选择器(Selector)的权重(Specificity)决定了对于同一元素,到底哪一条 CSS 规则会生效.且仅有当多条 CSS 规则都对同一元素声明了相应样式时,才会涉及到权重计算的问题. 选择器的分类 正式计算选择器权重之前,先来看选择器是如何被分类的. 因为 CSS 选择器众多,在计算时,这些选择器被归为了三大类,按其权重由大到小依次为: ID 选择器:比如 #dialog 元素类型选择器(type selector)和伪选择器(pseudo selector):比如 h1,::

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选择器权重计算

权重计算规则 内联样式,如: style=" ",权值为1000. ID选择器,如:#content,权值为0100. 类,伪类和属性选择器,如.content,权值为0010. 类型选择器和伪元素选择器,如div p,权值为0001. 通配符.子选择器.相邻选择器等的.如*.>.+,权值为0000. 继承的样式没有权值. 权值越大,权重越高 !important !important 用来提升优先级,加了这句的样式的优先级是最高的. 原文地址:https://www.cnblo

CSS选择器权重计算规则

1.第一等:代表内嵌样式:如:style=" ",权重值为10000. 2.第二等:代表ID选择器:如:#content,权重值为0100. 3.第三等:代表类,伪类和属性选择器:如:.content,权重值为0010. 4.第四等:代表元素和伪元素选择器:如:div p,权重值为0001. 5.第五等:代表通配符,子元素选择器和相邻兄弟选择器等:如:*.>.+,权重值为0000. 6.继承的样式没有权重值. 7.!important; !important的作用是提升优先级,换

CSS选择器的权重计算

什么是CSS选择器权重? 即使在不太复杂的样式表中,要寻找同一元素可能有两个或者更多规则,当同一元素被多个不同来源的样式规则设置了样式后,如何处理样式规则的冲突,显示元素最后的样式,用到的计算规则就是CSS选择器的权重规则. 根据选择器的特殊性决定规则的次序.具有更特殊选择器的规则优先于具有一般选择器的规则.如果两个规则的特殊性相同,那么后定义的规则优先. 特殊性 为了计算规则的特殊性,给每种选择器都分配一个数字值.然后,将规则的每个选择器的值加在一起,计算出规则的特殊性.特殊性的计算不是以10

CSS选择器的权重关系

切记CSS选择器的权重关系,避免在页面中出现CSS样式无法生效的情况~ – 内嵌 id class 元素 – a b c d 内嵌 1 0 0 0 id 0 1 0 0 class.属性.伪类 0 0 1 0 元素.伪元素 0 0 0 1 通配符* 0       !improtant(写在声明中,更改权重值) 最高       a组数值只有把CSS写进style属性时才会为1,否则为0: b组数值决定于ID选择器,有多少ID选择器,并会进行此数组值累加: c组数值决定于类选择器,有多少类选择器

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

我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们.那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先. 那么,又怎么来计算选择器的特殊性呢?下面这张图介绍了特殊性的计算方法: 我们把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器

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

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