高手总结的CSS执行顺序及其优先权问题汇总
今天在看一本书时又看到了”CSS优 先权“这个问题，感觉这个问题还是比较重要的，也算是样式的特异性吧，尤其是在面对较多、较深层、较复杂的样式属性时，理解CSS的加权计算方法对于重写 样式属性之类的问题都会迎刃而解。那么接下来我就把CSS的执行顺序及其优先权问题做一个小小的总结吧。
1、CSS的执行顺序
在说CSS的执行顺序之前首先让我们看一下CSS的几种使用方式：
·外联样式表
通过语句
<link rel="stylesheet" type="text/css" href="xxx.css"/>
导入CSS样式文件
·内联样式表
直接在<head></head>里面写入
<style type="text/css">
...
选择器{
...
属性:值;
...
}
...
</style>
内嵌样式表
直接在HTML里面写入CSS样式(虽然不提倡这么做，但在这里为了说明问题还是要提一下)，如：
<p class="test" style="width:200px;height:100px;font-size:12px;color:#0066cc;">
BeyondWeb.cn-记录与分享前端开发的点点滴滴
</p>
对于执行顺序很好理解，在html页面载入时元素是从上向下依次加载的，当然在css样式表里css代码也是从上向下、从左到右执行的，对于同样的 选择器，后定义的样式会把先定义的样式覆盖掉（注意：这里说的是同样的选择器，如：先定义.test{color:red;}后定 义.test{color:yellow;}，两个选择器都是类选择器”.test“）。
我们来看个小例子：
HTML代码：
<p class="test">
BeyondWeb.cn-记录与分享前端开发的点点滴滴
</p>
CSS代码：
.test{
color:red;
}
这时文字是红色的，那么我们如果在我们的样式表里后面的代码里有对.test进行了颜色控制，如：
... .test{
color:red;
}
... .test{
color:yellow;
}
...
此时文字就变成黄色了，原因就是下面定义的属性把上面的覆盖了。
另外对于外联样式表、内联样式表、内嵌样式表就看它们在html页面中的位置了，对于相同选择器控制的相同属性，哪一个样式表里面的属性最后执行就取哪里面的样式。
2、CSS的优先权
CSS2.1规范中定义了样式规则的计算方式，使用一个4位数字串来表示权重，每个选择器的权重决定了使用哪种样式，使用的规则有如下几种：
·元素的内联样式属性，加1,0,0,0
·每个id选择器，加0,1,0,0
·每个class选择器、属性选择器及伪类，加0,0,1,0
·每个元素及伪元素（如：firstchild）,加0,0,0,1
·提高权限，使用!important
然后，逐位数字相加，得到最终的数字串，按照从左到右的顺序逐位比较，一旦对应数字位比较出大小，那么谁大采用谁的规则，如下面几个demo：
Demo1:
规则1
.test h2{
color:red;//规则1
}
一个class选择器（取0010），一个html元素（取0001），相加得0011
规则2
h2{
color:red;//规则2
}
一个class选择器（取0001），最后还是0001通过两个样式的最终数字串比较得出结果：取样式1的规则
Demo2:
样式1
li.currentMenu
{
color:#333;
}
一个html元素（取0001），一个class选择器（取0010），相加得0011
样式2
ul li{
color:#666;
}
两个html元素（两个0001），相加得0002
通过两个样式的最终数字串比较得出结果：取样式1的规则。虽然有2>1，但它在从左到右第四位，在第三位比较时已经有1>0，所以无论后面的位数谁大谁小都视为无效。
对于!important，语法如下：
属性：值1 [值2,..值n] !important;
比如：
<p class="test">
BeyondWeb.cn-记录与分享前端开发的点点滴滴
</p>
...
.test{
color:red !important;//语句1
}
...
.test{
color:yellow;//语句2
}
...
最终字体的样式为红色red，因为!important提高了语句1的权限。
好了，以上就是我对于CSS执行顺序及其优先权的理解，就总结这么多吧。
高手总结的CSS执行顺序及其优先权问题汇总的更多相关文章
- html/css基础篇——link和@inport详解以及脚本执行顺序探讨
先说一说两者之间的异同 两者都可以引用外部CSS的方式,现在主流浏览器两者都支持(ps:@import是CSS2.1提出的),但是存在一定的区别: 1.link是XHTML标签,除了加载CSS外,还可 ...
- CSS规则的执行顺序（转）
你对CSS规则的执行顺序是否了解,这里和大家分享一下,若两条规则具有相同的权值.起源及特殊性,那在样式表中最后出现的规则优先. 1.CSS规则之特殊性 首先来看一下这个例子将会发生的情形: <s ...
- wex5 实战 wex5与js的组件关系与执行顺序（父子与先后）
初学wex5,先理理让人容易混淆的三个概念: 一 基本概念: 1 wex5组件,顾名思义,在编辑窗口右侧的组件集合里的,都是wex5基于开源自创的组件,并封装了一套自已的方法.目的是为了方便.相关方法 ...
- jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: <html xmlns="http://www.w3.org/1999/xhtml"> < ...
- 简单理解Struts2中拦截器与过滤器的区别及执行顺序
简单理解Struts2中拦截器与过滤器的区别及执行顺序 当接收到一个httprequest , a) 当外部的httpservletrequest到来时 b) 初始到了servlet容器 传递给一个标 ...
- Javascript在页面加载时的执行顺序【转】
一.在HTML中嵌入Javasript的方法 直接在Javascript代码放在标记对<script>和</script>之间 由<script />标记的src属 ...
- javascript的执行顺序
先看下面两段js程序,先是定义式函数写法: 复制代码 <script type="text/javascript"> function myfunc(){ alert( ...
- Javascript加载执行顺序
本文主要内容 一.不同位置的script标签执行顺序 二.document.ready和window.onload的区别 一.不同位置的script标签执行顺序 整个加载的过程从解析头部开始,比如ht ...
- 浏览器环境下JavaScript脚本加载与执行探析之代码执行顺序
本文主要基于向HTML页面引入JavaScript的几种方式,分析HTML中JavaScript脚本的执行顺序问题 1. 关于JavaScript脚本执行的阻塞性 JavaScript在浏览器中被解析 ...
随机推荐
- python3.4入门——核心数据类型
变量.对象和引用 变量的创建:一个变量(即变量名,如a),当代码第一次给它赋值就创建了它. 变量类型:变量没有任何和它关联的类型信息约束.类型的概念存在于对象中,而不是变量名中.变量原本是通用的,只是 ...
- c#添加事物（全部执行和带保存点的执行）
全部执行 protected void Button2_Click(object sender, EventArgs e) { // 执行事务 SqlConnection con = new SqlC ...
- 用 C 语言编写 Windows 服务程序的五个步骤
Windows 服务被设计用于需要在后台运行的应用程序以及实现没有用户交互的任务.为了学习这种控制台应用程序的基础知识,C(不是C++)是最佳选择.本文将建立并实现一个简单的服务程序,其功能是查询系统 ...
- 深入浅出Node.js (3) - 异步I/O
3.1 为什么要异步I/O 3.1.1 用户体验 3.1.2 资源分配 3.2 异步I/O实现现状 3.2.1 异步I/O与非阻塞I/O 3.2.2 理想的非阻塞异步I/O 3.2.3 现实的异步I/ ...
- shell数组（产生不同的随机数）
#!/bin/bash # declare -a ARRAY read -p "Please input num[1-39]:" EMENUM #对比新生成的随机数是否重复 fun ...
- SVN版本分支合并
SVN,开发中常用的工具,也没什么可说的.这里只是记录一下,以免太久不用了想用的时候又忘了. 首先已经有两个目录,一个是分支目录SVNChild,一个是主干目录SVNMain.SVNChild是从SV ...
- iOS 推送证书制作 （JAVA/PHP）
// aps_development.cer 转化成pem openssl x509 -in aps_development.cer -inform der -out PushChatCert.pem ...
- 简易的C/S系统(实现两个数的和)
//Client:#include <string.h> #include <sys/socket.h> #include <stdio.h> #include & ...
- 45 个非常有用的 Oracle 查询语句（转）
这里我们介绍的是 40+ 个非常有用的 Oracle 查询语句,主要涵盖了日期操作,获取服务器信息,获取执行状态,计算数据库大小等等方面的查询.这些是所有 Oracle 开发者都必备的技能,所以快快收 ...
- [HDU 1317]XYZZY[SPFA变形][最长路]
题意: 一个图, 点权代表走到该点可获得的能量值. 可正可负. 一个人从1 号出发,带有100点能量. 问是否有一种方案可使人在能量值>0的时候走到n. 思路: 这个题首先要注意点权. 其实就是 ...