深入理解css优先级

为什么要写这篇文章是因为

<style type="text/css">
body h1 {color: green;
}
html h1 {color: purple;
}
</style><body><h1>Here is a title!</h1>
</body>

上面代码执行结果是这样的。按照我的理解,body在DOM中比html近,应该会按body h1中定义的绿色来显示文字,但是恰恰相反,文字颜色是紫色的。

原因现在我当然是知道的,因为css中优先级无视DOM树中节点的距离远近,就是说DOM树中的距离不会对元素优先级计算产生影响。如果优先级相同,靠后的 CSS 会应用到元素上。而html h1靠后,当然是紫色了,如果调换html h1body h1顺序那就是绿色了。

以上我刚开始犯的错误,其实是被继承样式给唬住了,但是继承的样式是低于设定的样式的。如果只是继承,那离的近的当然优先级高,比如举个例子:

<style type="text/css">
#close{color: green;
}
#further{color: purple;
}
</style><body>
<div id="further">
<div id="close"><h1>Here is a title!</h1>
</div>
</div>
</body>

不管#close和#further顺序,文字都是绿色的。

接下来就系统的看看css优先级。

一、优先级

浏览器根据优先级来决定给元素应用哪个样式,而优先级仅由选择器的匹配规则来决定。

内联》ID选择器》伪类=属性选择器=类选择器》元素选择器【p】》通用选择器(*)》继承的样式

二、优先级计算:

上面说了,优先级仅有选择器决定,怎么个计算方法呢?

a、用a表示选择器中ID选择器出现的次数

b、用b表示类选择器属性选择器伪类选择器出现的总次数。

c、用c表示标签选择器伪元素选择器出现的总次数

d、忽略通用选择器

e、然后计算a*100+b*10+c的大小,这就是优先级了。

权重:内联样式1000》id选择器100》class选择器10》标签选择器1

Note:

ID选择器「如:#header」,Class选择器「如:.foo」,属性选择器「如:[class]」,伪类「如::link」,标签选择器「如:h1」,伪元素「如::after」,选择器「*」

接下来从以下几点深入分析优先级。

1、优先级计算无视DOM树中的距离

开头说明的例子:

<!DOCTYPE html>
<html>
<style type="text/css">
body h1 {color: green;
}
html h1 {color: purple;
}
</style>
</head>
<body>
<h1>Here is a title!</h1>
</html>
View Code

body h1和html h1的优先级相同。

2、伪类选择器,属性选择器和class选择器的优先级一样【update20170422】

伪类=属性选择器=类选择器

所以后面的会覆盖前面的。

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style type="text/css">:focus {color: red;}[class] {color: blue;}.classtest {color: green;}
</style>
</head>
<body>
<div class="classtest">什么颜色文字
</div>
</body>
</html>
View Code

如下图类选择器在后,所以覆盖前面的样式,所以文字绿色。

如下图属性选择器在后,会覆盖前面的类选择器样式,所以文本蓝色。

focus同理,只有放后面才生效,否则会被伪类和属性选择器覆盖

3、基于类型的优先级

优先级是根据选择器的类型进行计算的。

举例:属性选择器尽管选择了一个ID但是在优先级计算中还是根据类型计算,因此即使选择的是相同的元素,但ID选择器有更高的优先级,所以* #foo设置的样式生效。

<!DOCTYPE html>
<html>
<style type="text/css">
* #foo {color: green;
}
*[id="foo"] {color: purple;
}
</style>
</head>
<body>
<p id="foo">I am a sample text.</p>
</body>
</html>
View Code

4、:not伪类不参与优先级计

【:not】否定伪类在优先级计算中不会被看做是伪类,但是,会把:not里面的选择器当普通选择器计数。这句话有点不好理解,其实就是忽略掉:not,其他伪类(如:hover)参与CSS优先级的计算,但是「:not」不参与计算。

举个例子:

<!DOCTYPE html>
<html>
<style type="text/css">
div.outer p {color:red;
}
div:not(.outer) p {color: blue;
}
</style>
</head>
<body>
<div class="outer"><p>This is in the outer div.</p><div class="inner"><p>This text is in the inner div.</p></div>
</div>
</body>
</html>
View Code

该例子中,选择器div.outer p 和选择器div:not(.outer) p的优先级是相同的,:not被忽略掉了,:not(.outer)中的.outer正常计数。

如果调换位置,inner元素会变成红色

    div:not(.outer) p {color: blue;}div.outer p {color:red;}

5、优先级计算不升位

不要把权重简单的作为10进制数字比较其大小。

a=1的规则优先级将永远高于其他a=0的。

比如一个选择器的a>0,b=0即使另外一个选择器的a=0,b=12,c=12那么前者的权重依然更大!!

为证明我做了一个不现实的demo

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<style type="text/css">#test{ /*a=1*/color: blue
}
div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest div.classtest{ /*b=12*/
color:green;
}</style>
</head>
<body>
<div  class="classtest">
<div class="classtest">
<div class="classtest">
<div class="classtest">
<div class="classtest">
<div class="classtest">
<div class="classtest">
<div class="classtest">
<div class="classtest">
<div class="classtest">
<div class="classtest">
<div id="test" class="classtest">
什么颜色文章
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
View Code

可见文本颜色还是蓝色!!

同样有一个带有10个id选择器的规则,优先级也不如内联样式。

总之优先级的计算不是基于十进制升位的,后面的数优先级再高也不能升到前一位。

6、其他

下面再给出一个经典的例子,自己计算一下就明白了。

Examples:*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

如果确实有棘手的情况,可以在Firebug中查看优先级。Firebug中按照优先级排序显示规则,将优先级更高的规则显示在最上面,并将被覆盖的规则用删除线划掉。

三、!import

为什么没有把!import放在优先级顺序中,因为官方认为!import和优先级没一点关系。

不建议使用!import

  • Never 绝不要在全站使用!import。
  • Only 只在需要覆盖全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定页面中使用   !important
  • Never 永远不要在你的插件中使用 !important
  • Always 要优先考虑使用样式规则的优先级来解决问题而不是 !important

选择元素时尽量不要多选,不要放宽选择器的范围。因为范围越小,越具有针对性,优先级越高。

1、什么场合使用!import?

使用!import的场合也是有的,但是是在没有别的解决方案的时候。

比如需要覆盖内联样式,因为内联样式的优先级最高,只能用!import去覆盖内联样式。

还有一种情况

<style type="text/css">
#someElement p {color: blue;
}p.awesome {color: red;
}
</style>
</head>
<body>
<div id="someElement">
<p class="awesome">some text</p>
</div>
</body>

在外层有 #someElement 的情况下,你怎样能使 awesome 的段落变成红色呢?这种情况下,如果不使用 !important ,第一条规则永远比第二条的优先级更高。这也是没有别的办法,如果用内联结果只会更糟糕。

2、怎样覆盖已有!import规则

a、再加一条!import的css语句,将其应用到更高优先级的选择器(在原有基础上添加额外的标签、类或者ID选择器)。

几个更高优先级选择器的例子:

table td    {height: 50px !important;}
.myTable td {height: 50px !important;}
#myTable td {height: 50px !important;}

b、选择器一样,但添加的位置在原有声明后面。因为相同优先级,后边定义的声明覆盖前面的。

相同选择器的例子:

td {height: 30px !important;}
td {height: 50px !important;}

四、资源链接

http://www.w3.org/TR/selectors/#specificity
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

转载于:https://www.cnblogs.com/starof/p/4387525.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/420042.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php查询数据方法,php查询数据库的方法

php查询数据库的方法发布时间&#xff1a;2020-08-28 14:14:45来源&#xff1a;亿速云阅读&#xff1a;104作者&#xff1a;小新php查询数据库的方法&#xff1f;这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容…

powerdesigner 反向工程 oracle,PowerDesigner oracle 反向工程到cdm文件

用PowerDesigner反向工程来导处数据模型图是很方便的&#xff0c;以powerdesigner11 和oracle8i为例(其他版本略有不同)基本步骤如下&#xff1a;1&#xff0c;打开或新建一个PhysicalDataModel文件(.pdm) &#xff0c;(DBMS 是Sybase AS Anywhere 9 &#xff0c;或者下拉列表中…

前端学习(1428):ajax封装三

ajax.js // 引用expess框架 const express require(express); // 处理路径 const path require(path);const bodyParser require(body-parser); const fs require(fs);// 创建网站服务器 const app express(); app.use(bodyParser.json()); app.get(/first, (req, res) &…

前端学习(1429):ajax封装四

ajax.js // 引用expess框架 const express require(express); // 处理路径 const path require(path);const bodyParser require(body-parser); const fs require(fs);// 创建网站服务器 const app express(); app.use(bodyParser.json()); app.get(/first, (req, res) &…

oracle表分区失效14400,Oracle11g:分区表数据操作出现ORA-14400异常处理详解

Oracle11g&#xff1a;分区表数据操作出现ORA-14400异常处理问题&#xff1a;当对已分区的表数据进行操作(例如新增&#xff0c;修改)&#xff0c;出现异常提示&#xff1a;ORA-14400: 插入的分区关键字未映射到任何分区分析&#xff1a;意思说的是插入的数据没有相对应的分区来…

java中对map使用entrySet循环

根据JDK5的新特性,用For循环Map,例如循环Map的Key 123for(String dataKey : paraMap.keySet()) { System.out.println(dataKey ); }注意的是,paraMap 是怎么样定义的,如果是简单的Map paraMap new HashMap ();那前面的String就只能换成Object了.循環整個map的k…

oracle查询表字段和备注,Oracle 查询表信息(字段+备注)

获取表字段&#xff1a;select *from user_tab_columnswhere Table_Name‘用户表‘order by column_name获取表注释&#xff1a;select *from user_tab_commentswhere Table_Name‘用户表‘order by Table_Name获取字段注释&#xff1a;select *from user_col_commentswhere Ta…

前端学习(1430):ajax封装五

ajax.js // 引用expess框架 const express require(express); // 处理路径 const path require(path);const bodyParser require(body-parser); const fs require(fs);// 创建网站服务器 const app express(); app.use(bodyParser.json()); app.get(/first, (req, res) &…

VM虚拟机不能上网的问题解决

VM虚拟机不能上网的问题解决 源文&#xff1a;http://www.360doc.com/content/13/0827/13/1001775_310226875.shtml转载于:https://www.cnblogs.com/xiaohaizhuimeng/p/VM.html

前端学习(1431):ajax封装六

ajax.js // 引入express框架 const express require(express); // 路径处理模块 const path require(path); const bodyParser require(body-parser); const fs require(fs); // 创建web服务器 const app express();app.use(bodyParser.json());// 静态资源访问服务功能 …

c# 操作oracle数据库,C#连接oracle数据库增删改查实例

【实例简介】C#连接oracle数据库&#xff0c;增删改查实例&#xff0c;OracleParameter防Sql注入等&#xff0c;适用于新手学习【实例截图】【核心代码】5868e8be-414a-4138-8390-2fbbf9a1d530└── CS1├── CS1│ ├── app.config│ ├── bin│ │ ├── Debu…

毫秒级百万数据分页存储过程

然后创建分页存储过程;这个是基于SQL 2005 的ROW_NUMBER的, SQL 2000 不适用; SQL 2008 我没有安装,所以也没有测试过!估计应该可以运行. 2种算法可以选择 1. 使用 BETWEEN ; 2. TOP ; 代码中已经注释了. 我测试了一下2种方法基本没有什么区别;代码如下: 123456789101112…

oracle11连12c报权限错误,关于Oracle12c连接报错的问题

关于Oracle12c连接报错的问题这段时间因为项目原因&#xff0c;接触到了Oracle12C&#xff0c;其实问题很简单&#xff0c;就是pl/sql developer能够访问数据库服务端即可&#xff0c;却碰到了奇奇葩葩的问题&#xff0c;现分享一下。1、在java端报Ora-12505错误&#xff0c;即…

前端学习(1433):vue是什么

#### 1.1 Vue是什么> Vue.JS是优秀的前端 JavaScript 框架 > > react/angular/vue库和框架的区别:- 库(如jQuery)库是工具. 提供大量API&#xff0c;体现了封装的思想、需要自己调用这些API- 框架框架提供了一套完整解决方案,使用者要按照框架所规定的某种规范进行开发…

oracle10客户端tnsname,连接Oracle RAC 的tnsname.ora设置

由于Oracle数据库通常需要在不同地方被访问&#xff0c;所以Oracle开发人员必须搞清楚数据库性能如何被网络通讯所影响。由Oracle提供的TNS(Transparent Network Substrate)允许不同数据库之间的分布式通讯。作为一种分布式协议的TNS&#xff0c;允许远距离的系统之间的透明数据…

【100亿次的挑战】之春晚控制后台故事分享

讲师&#xff1a;freyli 项目历程简介在介绍控制后台部分之前&#xff0c;先简单回顾下项目的时间线&#xff1a; 10月25日&#xff0c;意向、调研、策划、沟通 11月24日&#xff0c;第一次技术初审 12月7日&#xff0c;互动形态框架确定&#xff0c;时间轴初现 12月15日&#…

前端学习(1434):为什么学习vue

#### 1.2 为什么要学习 Vue传统开发模式: JQueryRequireJS/SeaJSartTemplateGulp/Grunt随着项目业务场景的复杂,传统模式已无法满足需求就出现了Angular/React/Vue等框架- 企业需求 - 主流框架之一(React Angular Vue) - 易用、灵活、高效

oracle 如何创建job,oracle创建job

一、基本语法与MysqL的event事件类似&#xff0c;用来创建数据库的定时任务。DBMS_JOB.SUBMIT(job OUT BINARY_INTEGER,what IN VARCHAR2,NEXT_DATE IN DATE DEFAULTSYSDATE,interval IN VARCHAR2 DEFAULT NULL,no_parse IN BOOLEAN DEFAULT FALSE,instance IN BINARY_INTEGER …

如何简单快速调试高大上的谷歌浏览器

上一篇我们简单的将了在Ubuntu上编译chromium&#xff0c;android content_shell_apk的编译&#xff0c;一切顺利的就能生成apk。但是我们仅仅只是照搬了人家google开源的东西&#xff0c;作为一个开发者我们应带着探索的精神&#xff0c;都说它稳定&#xff0c;速度快。它为什…