样式不起作用时,多数是样式优先级或是样式继承的问题,在一遍文章看到很详细的介绍,摘录了下来和大家一起分享。(样式效果图)
![](https://www.cnblogs.com/images/cnblogs_com/lgh/23.PNG)
优先原则一:文本从上到下,后出现的样式优先于前面出现的同一样式
例:
<style type=”text/css”>
.def1{background:black;}
.def2{background:yellow; }
</style>
<div class=” def2 def1″>测试1</div>
结果:所有浏览器均yellow色,注意:与class=”” 引号内的顺序无关,只看.def1和.def2在声明时的顺序,.def2后声明的所以权重高。
优先原则二:id声明(即 # 开头的样式)> class声明(即 . 开头的样式)> 标签声明(即 类似 div 开头)
以上三种声明处于不同的量级,份量上,div 开头相当于 1克 重,. 开头相当于 1公斤 重,# 开头相当于 1吨 重。
例:
<style type=”text/css”>
#bb{background:pink}
.def{background:black;}
div{background:yellow; }
</style>
<div id=”bb” class=”def”>测试2</div>
结果:所有浏览器均pink色,注意:虽然按优先原则一,后出现的权重高,但那只是在同样重量级下的比较,优先原则二各重量级别就不同了。
优先原则三:数量取胜。如果同一个样式声明即一个大括号{}由多个 # . 或 div 组成,则权重按出现符号的量级增加
比如:#bb #tt #dd {background:red} 则重量等于3吨
#bb .tt ul.dd li {background:red} 则重量等于1吨2公斤2克,这么精确的重量,就不需要举例了吧。
再次说明:优先原则一只适用两个样式声明同样重的情况
优先原则四:‘!important’。相当于无限重量,在之前已经有说明,需要注意:ie下,在同一条样式声明即一个大括号中出现的!important 会被随后出现的同名样式冲洗掉。
<style type=”text/css”>
.def1{background:yellow !important;background:red;}
.def2{background:green;}
</style>
<div class=”def1 def2 “>dd</div>
结果:ie下,green色,background:yellow !important被后面的background:red冲洗了,而background:red与background:green的较量中,前者败在优先原则一之下。
优先原则五:近水楼台。<div style=”background:black”></div>直接写在元素体内的style优先级别最高!(仅次于!important)用重量来形容,可以定为百万吨量级。
<style type=”text/css”>
.def1{ background:red;}
</style>
<div class=”def1 ” style=”background:black”>dd</div>
结果:black色。
<style type=”text/css”>
.def1{ background:red !important;}
</style>
<div class=”def1 ” style=”background:black”>dd</div>
结果:red色。
<style type=”text/css”>
.def1{ background:red !important;}
</style>
<div class=”def1 ” style=”background:black !important”>dd</div>
结果:black色。
下面的代码应用了上面的优先级,请看效果。
![](https://www.cnblogs.com/Images/OutliningIndicators/ContractedBlock.gif)
Code
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5
<meta http-equiv="Content-Language" content="zh-CN" />
6
<meta content="all" name="robots" />
7
<meta name="author" content="爱煮饭团队" />
8
<meta name="Copyright" content="爱煮饭团队制作,可以自由分享" />
9
<meta name="description" content="爱煮饭,美食分享的新时尚社区" />
10
<meta content="爱煮饭、菜谱、煮饭、家常菜、小吃、主食、靓汤" name="keywords" />
11
<link rel="icon" href="http://www.izhufan.cn/favicon.ico" type="image/x-icon" />
12
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
13![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
14![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
<style>![](https://www.cnblogs.com/Images/dot.gif)
15![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
body,div,p,ul,li{
}{margin:0; padding:0;font:Arial, Helvetica, sans-serif; font-size:12px; color:#626262; text-align:center}
16![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
a{
}{text-decoration : none;}
17![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
ul,li{
}{ list-style:none;}
18![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
#News_Tt,#News_Cc{
}{background:url(bg.png) repeat-x}
19![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
#News_TL,#News_Tr,#News_Cr,#News_Cc ul li{
}{background:url(bg_x.jpg) no-repeat}
20![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
21![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
22![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
#News{
}{ width:755px; height:25px; line-height:25px;margin-top:150px;margin-left:50px;}
23![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
#News div{
}{ height:25px; float:left; text-align:center; padding:0; margin:0}
24![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
#News_TL{
}{ width:5px; background-position:-208px -27px}
25![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
#News_Tt{
}{ width:81px; background-position:0px -82px; font-weight:bold}
26![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
#News_Tr{
}{ width:7px; background-position:-213px -27px}
27![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
#News_Cc{
}{ width:655px;background-position:0px -109px;}
28![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
#News_Cr{
}{ width:4px; background-position:-220px -27px}
29![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
#News_Cc ul li{
}{ float:left; width:203px; height:23px;margin-top:1px; line-height:12px; text-align:left;background-position:-170px -80px}
30![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
#News_Cc ul li a{
}{ margin-left:20px; display:block; color:#42833A ;margin-top:7px}
31![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
#News_Cc ul .lista{
}{width:110px;}
32![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
#News_Cc ul .listb{
}{width:120px;}
33![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
#News_Cc ul .listc{
}{width:200px;}
34![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
#bb{
}{background:red;}
35![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
.def{
}{background:black;}
36![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
div{
}{background:pink;}
37
</style>
38
</head>
39
<body>
40
<div id="bb" class="def">dd</div>
41
<div id="News">
42
<div id="News_TL"></div>
43
<div id="News_Tt"><a href="#" target="_blank">最新动态</a></div>
44
<div id="News_Tr"></div>
45
<!--消息内容-->
46
<div id="News_Cc">
47
<ul>
48
<li class="lista"><a href="#" target="_blank">十一放假通知</a></li>
49
<li><a href="#" target="_blank" style="color: rgb(255, 119, 0);">学习CSS,乐趣无穷</a></li>
50
<li class="listc"><a href="#" target="_blank">学习CSS,让你的网页更少代码</a></li>
51
</ul>
52
<a href="#" target="_blank" class="fcopy">>></a></div>
53
<div id="News_Cr"></div>
54
</div>
55
</body>
56
</html>