在两个或多少CSS规则应用于同元素上时,不同级别的优先顺序从到高低是?

在两个或多少CSS规则应用于同元素上时,不同级别的优先顺序从到高低是?,第1张

在看css选择器优先级顺序前,我们先来简单说说css基本选择器有哪些?

1.标记选择器(如:body,div,p,ul,li)

2.id选择器(如:id=“name”,id=“name_txt”)

3.类选择器(如:id=“name”,id=“name_txt”)

4.后代选择器(如:#head .nav ul li 从父集到子孙集的选择器)

5.子元素选择器(如:div>p ,带大于号>)

6.伪类选择器(如:就是链接样式,a元素的伪类,4种不同的状态:link、visited、active、hover。)

看完了基本的css选择器类型后,我们接着来看一下css优先级的概念。

当两个规则都作用到了同一个html元素上时,如果定义的属性有冲突,那么应该用谁的值的,用到谁的值谁的优先级就高。

我们来看一下css选择器优先级的算法:

每个规则对应一个初始"四位数":0、0、0、0

若是 行内选择符,则加1、0、0、0

若是 ID选择符,则加0、1、0、0

若是 类选择符/伪类选择符,则分别加0、0、1、0

若是 元素选择符,则分别加0、0、0、1

算法:将每条规则中,选择符对应的数相加后得到的”四位数“,从左到右进行比较,大的优先级越高。

看完了上述内容,那我们就来看看css选择器优先级的具体排序。

css选择器优先级最高到最低顺序为:

1.id选择器(#myid)

2.类选择器(.myclassname)

3.标签选择器(div,h1,p)

4.子选择器(ul <li)

5.后代选择器(li a)

6.伪类选择(a:hover,li:nth-child)

最后,需要注意的是:

!important的优先级是最高的,但出现冲突时则需比较”四位数“

优先级相同时,则采用就近原则,选择最后出现的样式

继承得来的属性,其优先级最低。

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

引入样式优先级

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

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

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

<!-- 内联样式 --><spanstyle="color:red">Hello</span><styletype="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行优先级高--></div><divid="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"><Navbar><Titleclass="test__header--title">Toolbar</Title></Navbar></Header><Content></Content></Page>

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

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

链接:https://www.jianshu.com/p/1c4e639ff7d5


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11077653.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-13
下一篇 2023-05-13

发表评论

登录后才能评论

评论列表(0条)

保存