争怎路由网/网站教程/内容

深入理解CSS选择器的优先级顺序

网站教程2024-02-23 阅读
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
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 中的外部级联采用 <link> 标记或者 @import 语句来引入。
示例代码如下：
<link rel="stylesheet" href="style.css" type="text/css" /> //link 链接
@import url("style.css"); //@import 导入
<link> 和 @import 的异同见其文章
2. 内联式（应用于当前页面）
门户网站的 CSS 代码通常采用嵌入式，即通常所说的内联方式 (Inline Style)，其使用 <style> 标记将样式定义为内部块对象。
示例代码如下：
<style type="text/css">
    body{font-family:Arial,Helvetica,sans-serif;}
</style>
内联 CSS 可以有效减少 HTTP 请求，提升页面性能，缓解服务器压力。由于浏览器加载完 CSS 才能渲染页面，因此能防止 CSS 文件无法读取而造成页面裸奔的现象。
3. 嵌入式(应用于具体的标签)
最初级的 CSS 写法即把代码直接添加于所修饰的标记元素。
示例代码如下：
<div style="font-family:Arial,Helvetica,sans-serif;">饿了么</div>
这样做虽然更为直观，但很大程度上加大了页面体积，不符合结构与表现分离的设计思想。
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选择器的优先级顺序的详细内容，更多请关注php中文网其它相关文章！
				
				
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



      
……
标签:深入理解CSS选择器的优先级顺序
 
相关阅读