美文网首页【HTML+CSS】
【CSS优先级与!important】

【CSS优先级与!important】

作者: 魔_术师 | 来源:发表于2017-06-03 00:44 被阅读3次

CSS样式优先级:

1、相同权值情况下,CSS样式的优先级总结来说,就是——就近原则(离被设置元素越近优先级别越高):

内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。

2、权值不同时,浏览器是根据权值来判断使用哪种css样式的,哪种样式权值高就使用哪种样式。

下面是权值的规则:

标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100。

举例:

div {color: red;}/*标签,权值为1*/

div span {color: green;}/*两个标签,权值为1+1=2*/

div>span {color: purple;}/*权值与上面的相同,因此采取就近原则*/

.main {color: white;}/*类选择符,权值为10*/

div span.warning {color: purple;}/*权值为1+1+10=12*/

#main .con p {color: yellow;}/*权值为100+10+1=111*/

3、CSS最高优先级:!important

举例:

div {

    color: red!important;/*!important 要写在分号前*/

    color: blue;

}

虽然程序由上而下运行,但是由于!important 将当前所在行的样式优先级升至最高,因此以上代码最终颜色为红的。

相关文章

  • 【CSS优先级与!important】

    CSS样式优先级: 1、相同权值情况下,CSS样式的优先级总结来说,就是——就近原则(离被设置元素越近优先级别越高...

  • js基础总结

    1.web标准结构(HTML),表现(css),行为(js) 2.css优先级!important > 行间 > ...

  • CSS里面important的用法

    转载别人的东西,自己记录下。 css !important用法CSS样式使用优先级判断 例一: CSS #box ...

  • 面试重点

    css优先级关系: !important(优先级最高 ei m pao teng t)>行内>id>类>标签>链接...

  • 9. 定位流

    1.css书写方式 书写优先级(同等优先级): !important > 行内 > 外链 = 内嵌 选择器优先级:...

  • CSS常见问题

    CSS优先级算法如何计算? 样式优先级规则: 优先级顺序为:!important>style>权重值权重规则:第一...

  • CSS样式(选择器)的优先级

    css样式(选择器)的优先级 计算权重分类 important 内联样式 后写的优先级高

  • CSS样式优先级

    遵循以下优先级(参考MDN CSS优先级) 以下顺序按照优先级递减的规则排列 !important规定的规则(不建...

  • HTML & CSS & JavaScript 知识点

    1. HTML 2. CSS 2.1 CSS 选择器优先级 !important > 行间样式 > id 选择器 ...

  • ## CSS三大特性

    ## CSS三大特性 # 继承性(inherit) # 层叠性 # 优先级 # important # div标签...

网友评论

    本文标题:【CSS优先级与!important】

    本文链接:https://www.haomeiwen.com/subject/gedpfxtx.html