您的位置：首页 > Web前端 > CSS

[置顶] Css 学习笔记--样式引入方式及按权重判断优先级

2017-08-20 14:13 483 查看

1、Css 学习笔记--样式引入方式及按权重判断优先级

标签：cssweb

CSS全称为“层叠样式表 (Cascading StyleSheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。

内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：

<p style="color:red">这里文字是红色。</p>

注意要写在元素的开始标签里，下面这种写法是错误的：

<p>这里文字是红色。</pstyle="color:red">

并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：

<p style="color:red;font-size:12px">这里文字是红色。</p>

嵌入式css样式，就是可以把css样式代码写在<styletype="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：

<style type="text/css">

span{

color:red;

}

</style>

嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。如右边编辑器中的代码。

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：

<link href="base.css" rel="stylesheet"type="text/css" />

注意：

1、css样式文件名称以有意义的英文字母命名，如 main.css。

2、rel="stylesheet"type="text/css" 是固定写法不可修改。

3、<link>标签位置一般写在<head>标签之内。

他们的优先级：内联式>嵌入式>外部式

但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<linkhref="style.css" ...>代码在<styletype="text/css">...</style>代码的前面（实际开发中也是这么写的）。感兴趣的小伙伴可以试一下，把它们调换顺序，再看他们的优先级是否变化。

其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）。

但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下，什么是权值呢？

有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码：

p{color:red;}

.first{color:green;}

<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

下面是权值的规则：

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：

p{color:red;} /*权值为1*/

p span{color:green;} /*权值为1+1=2*/

.warning{color:white;} /*权值为10*/

p span.warning{color:purple;} /*权值为1+1+10=12*/

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

2、关于CSS样式优先级

一般情况下：

[1位重要标志位] > [4位特殊性标志] >声明先后顺序

!important > [ id > class > tag ]

使用!important可以改变优先级别为最高，其次是style对象，然后是id > class>tag ，另外，另外在同级样式按照申明的顺序后出现的样式具有高优先级。
先来看下!important 这个诡异的东西。

1 <style type="text/css">

2  div{background: red !important; background: blue}

3 </style>

除了IE6，其他浏览器都会显示背景为红色，正是!important的作用，意思就是只要我在这里我就是最重要的啦，任何东西都不能取代我，没看见都是一个！外加一个英文单词 important 吗？很形象，很贴切了。IE6这里会显示背景为蓝色，并不是IE6不支持!important，而是它会按照样式声明顺序后出现的覆盖前面的，此时它已经不认识!important了，它六亲不认了。这正是广为流传的IE6 hack之一。而如果这样写会正常显示背景为红色：

1 <style type="text/css">

2 div{background: blue; background: red !important; }

3 </style>
再来看下4位特殊性标志 [0.0.0.0]

从左至右，每次给某一个位置+1，前一段对后一段具有无可辩驳的压倒性优势。无论后一位数值有多大永远无法超过前一位的1。

1，内联样式 [1.0.0.0]

A：<spanid="demo" style="color:red "></span>

B：还有就是JS控制的内联样式style对象，document.getElementById("demo").style.color="red";

这两者属于同一级别，不过一般情况是JS控制的内联样式优先级高，这与先后顺序申明有关系与本质无关，因为往往DOM操作是在DOM树加载完毕之后。

2，ID选择器 [0.1.0.0]

3，类，属性，伪类选择器 [0.0.1.0]

4，元素标签，伪元素选择器 [0.0.0.1]

关于CSS选择器可以查看W3C或者CSS的手册，不啰嗦了。

注意下伪类选择器

LVHA伪类,样式按LVHA优先级顺序从右至左覆盖，不同的顺序会产生不同的效果。

a:link - 默认链接样式

a:visited - 已访问链接样式

a:hover - 鼠标悬停样式

a:active - 鼠标点击样式

最后写下关于JS控制内联样式带!important的现象：

看下正常的Demo1：

1 <style type="text/css">

2 div{background: red !important; height:20px;}

3 #demo1{ background: green;}

4 .demo1{ background:blue;}

5 </style>

1 <div class="demo1" id="demo1" style="background: yellow"></div>

1 <script type="text/javascript">

2 document.getElementById("demo1").style.background="black";

3 </script>

最终显示背景为红色，这应该不会有什么问题, !important 放到哪都会改变优先级的，而后面的JS代码也不会改变优先级。

另外一个Demo2:

1 <style type="text/css">

2 div{background: red !important; height:200px;}

3 #demo2{ background: green;}

4 .demo2{ background: blue;}

5 </style>

6  <div class="demo2" id="demo2" style="background: yellow !important"></div>

1 <script type="text/javascript">

2 document.getElementById("demo2").style.background="black";

3 </script>

IE6,7        显示红色

FF2+        显示黄色

Opera9+   显示红色

Safari       显示黄色

Demo3:

1 <style type="text/css">

2 div{background: red !important; height:200px;}

3 #demo3{ background: green;}

4 .demo3{ background: blue;}

5 </style>

1 <div class="demo3" id="demo3" style="background: yellow !important"> </div>

1 <script type="text/javascript">

2 document.getElementById("demo3").style.background="black !important";

3 </script>

IE6,7       显示红色

FF2+       显示黄色

Opera9+  显示黑色

Safari      显示黑色

解释下上面两个例子：

JS控制的style对象实际就是内联样式style，这个没错

但是对于 JS控制style对象属性值里增加的!important 三个浏览器却给出了不同的结果：

IE：JS控制style对象属性值完全覆盖内联style属性值，不支持Element.style.property="value!important"，将报错:参数无效。

FF2+：不完全支持Element.style.property="value!important" : !important无效，不会报错, 如果内联style属性值无!important，则完全覆盖，有!important 则内联style属性优先级最高，不会受JS控制style的任何影响。

Opera9+ ：JS控制style对象属性值完全覆盖内联style属性值，支持Element.style.property="value!important"。

Safari：支持Element.style.property="value!important" ，如果内联style属性值无!important，则完全覆盖，有!important 则内联style属性优先级最高，不会受JS控制style的任何影响。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航