CSS选择器的优先级顺序是什么

这篇文章主要介绍了CSS选择器的优先级顺序是什么,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

为东安等地区用户提供了全套网页设计制作服务,及东安网站建设行业解决方案。主营业务为成都网站建设、网站设计、东安网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

CSS中有很多选择器,比如类选择器,标签选择器,ID选择器等等,不同选择器之间的优先级顺序也不一样,今天就和大家聊聊CSS选择器的优先级顺序,以及、!important的使用,有需要的朋友可以参考一下,希望对你有用。

1、!important 表示最高优先级。ie6浏览器不认识 !important 。

举例:

正常情况下,写在下面的样式优先级高于上面的样式

demo1{
color:red;
color:green; /*绿色的优先级高于红色,所有浏览器都会显示绿色*/
}

加了!important 那么它的优先级会比较高,ie6比较傻,不认识。

demo2 {
color:red !important; /*除了ie6,其他浏览器会认为红色优先级高,显示红色字体*/
color:green; /*ie6浏览器则顺序读取css所以显示绿色*/
}

但是注意,ie6不认识!important的优先级,但并不代表ie6不认识带!important的样式属性。

demo3{
color:red;
color:green !important; /*包括ie6,所有浏览器都显示绿色字体,ie6只是不认识优先级罢了*/
}

2、CSS (Cascading Style Sheets) 级联样式表,在实际应用中,一般有以下三种级联方式。

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

1. 外联式(应用于多个网页)

外联式样式表中,CSS 代码作为文件单独存放,如以 style.css 文件包含所有样式。在 HTML 中的外部级联采用 标记或者 @import 语句来引入。

示例代码如下:

 //link 链接
@import url("style.css"); //@import 导入

和 @import 的异同见其文章

2. 内联式(应用于当前页面)

门户网站的 CSS 代码通常采用嵌入式,即通常所说的内联方式 (Inline Style),其使用

内联 CSS 可以有效减少 HTTP 请求,提升页面性能,缓解服务器压力。由于浏览器加载完 CSS 才能渲染页面,因此能防止 CSS 文件无法读取而造成页面裸奔的现象。

3. 嵌入式(应用于具体的标签)

最初级的 CSS 写法即把代码直接添加于所修饰的标记元素。

示例代码如下:

饿了么

这样做虽然更为直观,但很大程度上加大了页面体积,不符合结构与表现分离的设计思想。

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

权值规则:标签(P、span)的权值为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*/

感谢你能够认真阅读完这篇文章,希望小编分享的“CSS选择器的优先级顺序是什么”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


网页名称:CSS选择器的优先级顺序是什么
网站地址:http://bzwzjz.com/article/ggepdi.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 手机网站制作 营销网站建设 达州网站设计 重庆网站建设 成都网站建设 成都网站制作 成都企业网站设计 网站制作 成都网站设计 专业网站设计 手机网站设计 成都网站制作 网站建设公司 成都网站设计 网站建设推广 成都定制网站建设 营销型网站建设 网站制作公司 成都网站设计 网站制作报价 app网站建设 成都网站设计公司