css的优先级的相关内容

以前也遇到过有关css优先级方面的问题,突然发现以前了解不够具体,知道了一些新的知识,还有很多不足,希望大家批评指正。

css样式连接到html的方式可分为内部和外部;内部样式有行内样式和嵌入样式两种,外部样式分为导入式和链接式两种。

我们先来探讨这四种方式的html编译的先后顺序:

head:

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

@import url(blue.css);
.top{color: yellow;}
</style>

 

body:
<div style="color:green;" class="top" >

 toptop

</div>

实现的色彩是绿色,即行间的样式是最优先

经过实验验证,另外三种,根据编译的顺序是从上到下规则,实现的效果是最下面的那个;

在html内部的样式分布,是我们平时经常用到的,考虑到的。

首先import!,它是css1定义的语法,但是在IE6中是不能实现的,这就是IE6的几大hack之一,不过在别的浏览器中优先级是最大的。

接着我们再来聊一下,平时用的css语法的优先级(即他们对应的权重)

内联样式(即行内样式):1000

id选择器:100

类选择器(class):10

元素选择器(p,span):1

举个简单的例子:

head:

<style>
.top{color: yellow;}
.top span{ color:blue;}
.top span.main{color:red;}
</style>

body:

<div class="top">
<span class="main">toptop</span>
</div>

显示的字体颜色为红色,即遵守下面原则,数字越大,优先级越大

.top 10

.top span  10+1

.top span.main 10+1+10

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。