css样式优先级顺序说明,css样式表的三种方式的优先级

css规定选择器优先级顺序

1. !important

成都创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:网站制作、网站设计、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的金州网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!

在属性后面写上这条样式,会覆盖掉页面上任何位置定义的元素的样式。

2. 行内样式,在style属性里面写的样式。

3. id选择器

4. class选择器

5. 标签选择器

  6. 通配符选择器*

7. 浏览器的自定义属性和继承

css选择器依照以上顺序排列优先级

css优先级计算规则

梳理这部分是因为在使用组件模式开发h5应用会出现组件样式修改未生效的问题,在解决样式修改的问题前,需要理清楚CSS样式生效的优先级。样式根据引入和声明需要分开介绍,分为 引入样式优先级 和 声明样式优先级 。

引入样式优先级

引入样式优先级一般是在外部样式、内部样式、内联样式之间应用同一个样式的情况是使用, 优先级如下:

外部样式 | 内部样式 内联样式

外部样式 和 内部样式 ,最后出现的优先级最高,例如:

!-- 内联样式 --spanstyle="color:red;"Hello/spanstyletype="text/css"/* 内部样式 */h3{color:green;}/style!-- 外部样式 style.css --linkrel="stylesheet"type="text/css"href="style.css"/

因此,对于一些重置的样式集,比如 normalize.css/reset.css 必须写在所有样式的前面。

PS: 没有外联样式, 参考 。

声明样式优先级

1. 大致的优先级

一般来说满这个规则:

继承不如指定

!important 内联 ID Class|属性|伪类 元素选择器

:link、:visited、:hover、:active按照LVHA(LoVe HAte)顺序定义

上面是优先级算法反映出的大致结果,在一般的开发中熟记即可。如果需要进一步研究原理,则了解下优先级算法。

2. 优先级算法

选择器的特殊性值分为四个等级,如下:

等级标签内选择符ID选择符Class选择符/属性选择符/伪类选择符元素选择符

示例span style="color:red;"#text{color:red;}.text{color:red;} [type="text"]{color:red}span{color:red;}

标记位x,0,0,00,x,0,00,0,x,00,0,0,x

特点:

每个等级的初始值为0,

每个等级的叠加为选择器出 现的次数相加

不可进位,比如0,99,99,99

依次表示为:0,0,0,0

每个等级计数之间没关联

等级判断从左向右,如果某一位数值相同,则判断下一位数值

如果两个优先级相同,则最后出现的优先级高,!important也适用

通配符选择器的特殊性值为:0,0,0,0

继承样式优先级最低 ,通配符样式优先级高于继承样式

计算示例:

a{color: yellow;} /*特殊性值:0,0,0,1*/

div a{color: green;} /*特殊性值:0,0,0,2*/

.demo a{color: black;} /*特殊性值:0,0,1,1*/

.demo input[type="text"]{color: blue;} /*特殊性值:0,0,2,1*/

.demo *[type="text"]{color: grey;} /*特殊性值:0,0,2,0*/

#demo a{color: orange;} /*特殊性值:0,1,0,1*/

div#demo a{color: red;} /*特殊性值:0,1,0,2*/

生效示例:

ahref=""第一条应该是黄色/a!--适用第1行规则--divclass="demo"inputtype="text"value="第二条应该是蓝色"/!--适用第4、5行规则,第4行优先级高--ahref=""第三条应该是黑色/a!--适用第2、3行规则,第3行优先级高--/divdivid="demo"ahref=""第四条应该是红色/a!--适用第6、7行规则,第7行优先级高--/div

关于伪类LVHA的解释

a标签有四种状态:链接访问前、链接访问后、鼠标滑过、激活,分别对应四种伪类:link、:visited、:hover、:active;

当鼠标滑过a链接时,满足:link和:hover两个伪类,要改变a标签的颜色,就必须将:hover伪类在:link伪类后面声明;

当鼠标点击激活a链接时,同时满足:link、:hover、:active三种状态,要显示a标签激活时的样式(:active),必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序。

这个顺序能不能变?可以,但也只有:link和:visited可以交换位置,因为一个链接要么访问过要么没访问过,不可能同时满足,也就不存在覆盖的问题。

在组件中的应用

目前的前端开发为了增加开发效率,会对常用组件进行封装,此外,组件还会添加一些必要的结构样式。但是业务的设计文稿中可不一定按照预先写好的默认样式,需要在开发业务时根据组件的DOM结构修改默认样式,此时会出现样式不生效的问题。

例如下面的结构,如果对Title直接增加样式类,则肯定不会生效,因为Title的DOM结构为两层(组件样式定义规定不能使用ID选择器,且类选择器满足最小标记原则)),故样式最多为0,0,2,x。因此,样式多层标记就可提高自定义样式的优先级,例如下方的SCSS写法。

Pageclass="test"Headerclass="test__header"NavbarTitleclass="test__header--title"Toolbar/Title/Navbar/HeaderContent/Content/Page

.test{.test__header{.test__header--title{height:100px;}}}

此外,对于Page组件的样式标记策略推荐使用 金字塔形(树形) ,比如上面的SCSS书写,这样可以保证内部自定义样式不会受到外部干扰,减少不必要的麻烦。

链接:

css样式 优先级?

如果你写的样式调用在前,而外部通用样式在后,那么它就会覆盖你的(css的意思是“层叠样式表”,而“层叠”的意思就是后面的会覆盖前面的)。而内联样式(也就是你说的“行内样式”)的优先级比外部样式(通过link标签调用的)和外联样式(写在style标签内的)都高,所以不会被覆盖。

css的优先级顺序是怎样的

当创建的样式表越来越复杂时,一个标签的样式将会受到越来越多的影响,这种影响可能来自周围的标签,也可能来自其自身。下面我们从这两方面去看看 CSS 样式的优先级。

CSS 的继承性

CSS 的继承特性指的是应用在一个标签上的那些 CSS 属性被传到其子标签上。看下面的 HTML 结构:

div

p/p/div

如果 div 有个属性 color: red,则这个属性将被 p 继承,即 p 也拥有属性 color: red。

由上可见,当网页比较复杂, HTML 结构嵌套较深时,一个标签的样式将深受其祖先标签样式的影响。影响的规则是:

CSS 优先规则1: 最近的祖先样式比其他祖先样式优先级高。

例1:

!-- 类名为 son 的 div 的 color 为 blue --div style="color: red"

div style="color: blue"

div class="son"/div

/div/div

如果我们把一个标签从祖先那里继承来的而自身没有的属性叫做"祖先样式",那么"直接样式"就是一个标签直接拥有的属性。又有如下规则:

CSS 优先规则2:"直接样式"比"祖先样式"优先级高。

例2:

!-- 类名为 son 的 div 的 color 为 blue --div style="color: red"

div class="son" style="color: blue"/div/div

选择器的优先级

上面讨论了一个标签从祖先继承来的属性,现在讨论标签自有的属性。在讨论 CSS 优先级之前,先说说 CSS 7 种基础的选择器:

ID 选择器, 如 #id{}

类选择器, 如 .class{}

属性选择器, 如 a[href="segmentfault.com"]{}

伪类选择器, 如 :hover{}

伪元素选择器, 如 ::before{}

标签选择器, 如 span{}

通配选择器, 如 *{}

CSS 优先规则3:优先级关系:内联样式 ID 选择器 类选择器 = 属性选择器 = 伪类选择器 标签选择器 = 伪元素选择器

例3:

// HTMLdiv class="content-class" id="content-id" style="color: black"/div// CSS#content-id {

color: red;}.content-class {

color: blue;}div {

color: grey;}

最终的 color 为 black,因为内联样式比其他选择器的优先级高。

所有 CSS 的选择符由上述 7 种基础的选择器或者组合而成,组合的方式有 3 种:

后代选择符: .father .child{}

子选择符: .father .child{}

相邻选择符: .bro1 + .bro2{}

当一个标签同时被多个选择符选中,我们便需要确定这些选择符的优先级。我们有如下规则:

CSS 优先规则4:计算选择符中 ID 选择器的个数(a),计算选择符中类选择器、属性选择器以及伪类选择器的个数之和(b),计算选择符中标签选择器和伪元素选择器的个数之和(c)。按 a、b、c 的顺序依次比较大小,大的则优先级高,相等则比较下一个。若最后两个的选择符中 a、b、c 都相等,则按照"就近原则"来判断。

例4:

// HTMLdiv id="con-id"

span class="con-span"/span/div// CSS#con-id span {

color: red;}div .con-span {

color: blue;}

由规则 4 可见,span 的 color 为 red。

如果外部样式表和内部样式表中的样式发生冲突会出现什么情况呢?这与样式表在 HTML 文件中所处的位置有关。样式被应用的位置越在下面则优先级越高,其实这仍然可以用规则 4 来解释。

例5:

// HTMLlink rel="stylesheet" type="text/css" href="style-link.css"style type="text/css"@import url(style-import.css); div {

background: blue;}/stylediv/div// style-link.cssdiv {

background: lime;}// style-import.cssdiv {

background: grey;}

从顺序上看,内部样式在最下面,被最晚引用,所以 div 的背景色为 blue。

上面代码中,@import 语句必须出现在内部样式之前,否则文件引入无效。当然不推荐使用 @import 的方式引用外部样式文件,原因见另一篇博客:CSS 引入方式。

CSS 还提供了一种可以完全忽略以上规则的方法,当你一定、必须确保某一个特定的属性要显示时,可以使用这个技术。

CSS 优先规则5:属性后插有 !important 的属性拥有最高优先级。若同时插有 !important,则再利用规则 3、4 判断优先级。

例6:

// HTMLdiv class="father"

p class="son"/p/div// CSSp {

background: red !important;}.father .son {

background: blue;}

虽然 .father .son 拥有更高的权值,但选择器 p 中的 background 属性被插入了 !important, 所以 p 的 background 为 red。

错误的说法

在学习过程中,你可能发现给选择器加权值的说法,即 ID 选择器权值为 100,类选择器权值为 10,标签选择器权值为 1,当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时,则将所有权值相加,然后再比较权值。这种说法其实是有问题的。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签,按理说 110 100,应该应用前者的样式,然而事实是应用后者的样式。错误的原因是:权重的进制是并不是十进制,CSS 权重进制在 IE6 为 256,后来扩大到了 65536,现代浏览器则采用更大的数量。。还是拿刚刚的例子说明。11 个类选择器组成的选择器的总权值为 110,但因为 11 个均为类选择器,所以其实总权值最多不能超过 100, 你可以理解为 99.99,所以最终应用后者样式。

css的三种样式中哪种样式的优先级最高

css样式采取的就近样式原则。

行内样式div style=""/div优先级最高,没有行内样式那么会回在页答面找style/style内嵌样式。

名称CSS中的“层叠(cascading)”表示样式单规则应用于HTML文档元素的方式。具体地说,CSS样式单中的样式形成一个层次结构,更具体的样式覆盖通用样式。样式规则的优先级由CSS根据这个层次结构决定,从而实现级联效果。

扩展资料:

易于使用和修改:

CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。

另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中。

参考资料来源:百度百科-CSS

CSS样式作用的优先顺序

CSS样式是按照从左往右的顺序执行的,但一般没必要太计较,只要把想要的都设置好了就行了。


网站标题:css样式优先级顺序说明,css样式表的三种方式的优先级
文章源于:http://scyanting.com/article/dsessdp.html