大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
(1) 优先级就近原则,同权重以最近者为准 载入样式以最后载入的样式为准;
开平ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景,ssl证书未来市场广阔!成为创新互联公司的ssl证书销售渠道,可以享受市场价格4-6折优惠!如果有意向欢迎电话联系或者加微信:028-86922220(备注:SSL证书合作)期待与您的合作!
同权重下:内联样式表(标签内部) 嵌入样式表(当前文件) 外部样式表(外部文件)
!import id class tag
Import比内联样式优先级高
层叠重要度次序:
带有important的用户样式
带有important的作者样式
作者样式
用户样式
浏览器/用户代理应用的样式
(2) 权重分为a b c d ,4个等级,每个等级以10为基数分别是
内联样式(或行内样式)a=1
b = ID选择器个数
c = 类、伪类和属性选择器的个数
d = 元素选择器和伪元素选择器的个数
层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。
一、CSS层叠性
是指多种CSS样式的叠加,是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉
比如先给某个标签指定了内部文字颜色为红色,接着又指定了颜色为蓝色,此时出现一个标签指定了相同样式不同值的情况,这就是样式冲突。
一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后的样式为准。
1.样式冲突,遵循的原则是就近原则。 那个样式离着结构近,就执行那个样式。
2.样式不冲突,不会层叠
3.CSS最后的执行口诀: 长江后浪推前浪,前浪死在沙滩上。
二、CSS继承性
所谓继承性是指书写CSS样式表时,子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。
简单的理解就是: 子承父业。
CSS最后的执行口诀: 龙生龙,凤生凤,老鼠生的孩子会打洞。
注意:
恰当地使用继承可以简化代码,降低CSS样式的复杂性。子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,以及color属性)
三、CSS优先级
定义CSS样式时,经常出现两个或更多规则应用在同一元素上,这时就会出现优先级的问题。在考虑权重时,初学者还需要注意一些特殊的情况,具体如下:
1.继承样式的权重为0。即在嵌套结构中,不管父元素样式的权重多大,被子元素继承时,他的权重都为0,也就是说子元素定义的样式会覆盖继承来的样式。
2.行内样式优先。应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。
3.权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
4.CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。
css样式表的权重关系:
内联样式表的权重最大!
内部和外部样式的权重,和书写的前后顺序有关。(放在后面的会把放在前面的样式覆盖掉,覆盖的只是相同属性的样式,不同属性的样式会继续执行。)
!important - 当前声明具有最高权重!
语法:background:red!important;
id选择器class选择器标签选择器通配选择器
CSS权重是由四个数值决定,看一张图比较好解释:
图里是英文的,我翻译过来分别说一下,4个等级的定义如下:
第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为100。
第三等:代表类,伪类和属性选择器,如.content,权值为10。
第四等:代表类型选择器和伪元素选择器,如div p,权值为1。
最后把这些值加起来,再就是当前元素的权重了。
权重算出来了,但是某个元素到底用哪个样式,还有3个规则,:
1,如果样式上加有!important标记,例如:
p{ color: gray !important}
那么始终采用这个标记的样式。
2,匹配的内容按照CSS权重排序,权重大的优先;
可以看到,CSS权重只是决定应用哪个样式的其中一个步骤,不过这个步骤是最复杂的,上面已经说过了。
3,如果权重也一样,按照它在CSS样式表里声明的顺序,后声明的优先,例如:
h1 {color: blue}
h1 {color: red}
最终胜出的是color: red。