中信建设有限责任公司待遇怎么样,长沙优化网站关键词,百度爱采购优化排名软件,wordpress 程序本节介绍选择器优先级#xff0c;优先级决定了元素最终展示的样式~
浏览器是通过判断CSS优先级#xff0c;来决定到底哪些属性值是与元素最为相关的#xff0c;从而作用到该元素上。CSS选择器的合理组成规则决定了优先级#xff0c;我们也常常用选择器优先级来合理控制元素…本节介绍选择器优先级优先级决定了元素最终展示的样式~
浏览器是通过判断CSS优先级来决定到底哪些属性值是与元素最为相关的从而作用到该元素上。CSS选择器的合理组成规则决定了优先级我们也常常用选择器优先级来合理控制元素达到我们理想的显示状态下面我们来具体了解下CSS选择器优先级及权重。 目录
一.选择器优先级
1.层叠性 2.继承性
3.优先级
4.权重叠加 一.选择器优先级
1.层叠性
当一个元素被定义了两种相同的属性时按照就近原则选取属性的取值~
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{color: red;font-size: 40px;}div{color: orange;}/style
/head
bodydiv心浮气躁乃大忌希望你能一直铭记/div
/body
/html
如上述代码虽然div的color值被定义了两次但是由于orange离得div更近物理上因此字体应该为橙色~ 2.继承性
如果子代选择器和它的父类选择器有相同的属性则按照子类的取值呈现~
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody{color: rgb(40, 47, 255);font-size: 40px;line-height: 1.5;}p{font-size: 20px;}div{/* 不继承body选择器的字体大小 */font-size: 10px;/* 但是继承行高的1.5倍属性 */}/style
/head
body男儿何不带吴钩收取关山五十州div男儿何不带吴钩收取关山五十州/divp男儿何不带吴钩收取关山五十州/p
/body
/html
如上代码段中body中的文字被设置为40px p中的为20px而div中只有10div子代的优先级逐级递减而优先级也愈发增加~效果如下 3.优先级
CSS选择器的优先级按照以下顺序排列!important 内联选择器 ID选择器 类别选择器 属性选择器 伪类 元素选择器 通配符选择器 继承选择器。如果有多个选择器作用在同一个元素上浏览器会根据这个优先级顺序来确定应用哪个样式。
在上述优先级顺序中important是最高优先级它可以覆盖其他任何优先级的样式。紧接着是内联选择器其次是ID选择器然后是类别选择器、属性选择器、伪类、元素选择器、通配符选择器和继承选择器。
需要注意的是如果两个选择器的优先级相同那么最后出现的样式将会被应用。
判断下列文本的颜色
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv{color: red;font-size: 50px;}.yanse1{color: yellow;color:darkgrey}#yanse2{color: rgba(56, 227, 233, 0.815);}div{color: gold !important;}/style
/head
bodydiv classyanse1 idyanse2 stylecolor: bisque;你能猜出来我是什么颜色/div
/body
/html
没错是金色~ 4.权重叠加
CSS权重叠加是指当多个CSS声明应用于同一元素时它们的权重值会叠加决定最终应用的样式。权重的计算是根据选择器的类型和数量来确定的。常见的选择器类型按照优先级从高到低为内联样式ID选择器类选择器元素选择器和通配符选择器。在同一类型的选择器中选择器的数量越多权重值越高。
通俗的说权重值是复合选择器之间优先级的对比~
计算公式大致由下列表格决定 选择器 权重计算继承父标签的样式 , * 通配符选择器0,0,0,0标签选择器0,0,0,1类选择器链接伪类选择器0,0,1,0ID 选择器0,1,0,0标签的行内样式 style 属性1,0,0,0样式后添加 !important权重无穷大
需要注意的是不同选择器之间的区别为量级不存在进位的说法
如下这段代码包含了3种复合样式控制属性 styleli{color: red;font-size: 50px;}ul li{color: blue;}.gold li{color: gold;}/style
第一个选择器的权值为0,0,0,1第二个选择器的权值为0,0,0,2第三个选择器的权值为0,0,1,1
因此文本的颜色应该为金色
