网址制作技术之关于CSS代码执行的优先级-沈阳易势科技有限公司

build网站制作

build网站制作当前位置：首页>主要服务>网站制作

网址制作技术之关于CSS代码执行的优先级

一、加入CSS代码的方式

a、在<head>标签对中链接外部样式：

b、在<head>标签对中写内部样式：

c、在链接外部样式表和内部样式的最前面可以使用 @import url(style.css); 输入样式

d、在标签属性中可以使用style属性写入，即行内样式：

二、CSS优先级是：行内样式 > 内部样式 > 链接外部样式？

是的，的确是这样，但我们必须给其限定一下条件，这个比较才是成立，而不是一味的就这样认为了。

这个条件就是：在相同的selector（选择器）情况下

在不使用“!important”的情况下，行内样式最优先，这个毋庸置疑，那么就比较没有行内样式吧

下面示例：

html代码：

<html xmlns="http://www.w3.org/1999/xhtml "> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title> new document </title> <link href="color1.css" rel="stylesheet" type="text/css"> <style type="text/css"> @import url(color2.css); span{color:#06f} </style> </head> <body> <div><span><b>什么颜色呢？</b></span></div> </body> </html>

color1.css ：

div span b{color:red}

color2.css ：

div span{color:blue}

那么文字的最终颜色是--red

是的，在不使用行内样式的情况下，外部链接样式打赢了。

三、CSS优先级计算方式

说明	权重
HTML标记	1
class	10
id	100
行内style	1000
!important	高于一切
继承	0

知道了这些，使用加法就很容易了解权重值了，例如：

div span{} 权重为：1+1=2

#select1 div{} 权重为：100+1=101

.select2 div{} 权重为：10+1=11

#select1 .select2 div{} 权重为：100+10+1=111

所以上面那个例子，外部链接样式权重3大于内部样式权重2

四、要注意的一些问题

1、如果!important声明冲突，则比较优先权。如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。

2、由@import加载的外部样式，由于@import必须出现在所有其它规则定义之前(如不是，则浏览器应该忽略之)，所以按照后来居上原则，一般优先权冲突时是占下风的。

3、关于继承性：
权重低，任何显式声明的规则都会覆盖继承的样式，比如全局选择符定义的规则；
局限性，有一些属性不能被继承，如：border, margin, padding, background等。

4、要使用内联样式，必须使用Content-Style-Type HTTP页眉扩展对整个文档进行单独的样式表语言声明。
<meta http-equiv="Content-Style-Type" content="text/css">

5、所有的 @import 声明必须放在样式表的开始部分，后面 @import 的样式覆盖前面 @import 的样式，所以<style>中的样式表规则超越输入样式表中对应的规则。