div+css第二天

一、css选择器的优先级

行内选择器>id选择器>class选择器>html选择器>通配符选择器

 我们可以采用!important语法来提升重要性(优先权)，例如：

p{background-color:red !important(ie6下不支持);background-color:green;}

如果是这样：

 1 <style type="text/css">
 2     p{color:blue !important;}
 3     .ps{
 4         color:red;
 5     }
 6     #p1{
 7         color:yellow;
 8     }
 9 </style>
10 
11 </head>
12 <body>
13 <p class="ps" id="p1">追求卓越，成功就会在不经意间追上你！</p>
14 </body>

最终会显示蓝色字体，在ie6下也有效。

二、父子选择器

例子：

 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=utf-8" />
 5 <title>css父子选择器</title>
 6 <style type="text/css"> 
 7 #sp1{
 8     font-size: 16px;
 9 }
10 #sp1 span{
11     color: red;
12     font-style:italic;
13 }
14 #sp1 span span{
15     color: blue;
16 }
17 #sp1 span span a{
18     color: pink;
19 }
20 </style>
21 </head>
22 <span id="sp1">这是一则<span>非常<span>重<a href="#">百度</a></span>要</span>的新闻</span>
23 <body>
24 </body>
25 </html>

 

注意：1.父子选择器可以有多级(但在实际开发中最好还是不要超过三层)；

　　   2.父子选择器有严格的层级关系

        3.父子选择器不局限于什么类型的选择器

父子选择器相当于是对id选择器，class选择器，html选择器的组合运用。

 

四、选择器细节

1.一个元素可以同时拥有id选择器和类选择器

示例：

1 .sp2{
2     color:green;
3 }
4 #new1{
5     color: red;
6 }
7 
8 
9 <span class="sp2" id="new1">新闻1，我可以同时有class选择器和id选择器</span>

最终颜色会变成红色，因为id选择器的优先级高于class选择器。

 

2.一个元素最多只能有一个id选择器，但可以有多个类选择器

示例：

1 .sp3{
2     color:#90C;
3 }
4 .sp4{
5     font-style:italic;
6     color:#39F;
7 }
8 
9 <span class="sp3 sp4">新闻2</span>

中间用空格隔开。

特别注意：当两个选择中的属性设置发生冲突时，以哪个为准呢？也就是说比如两个类选择器都对颜色进行了设置。

是以类选择器在css文件中出现的先后顺序为准的，后面的会覆盖前面的。

 3.如果多个选择器里有设置了相同的属性和属性值，我们就可以把它们公共的部分抽取出来，减少代码的冗余。

示例：

 1 .sp5{
 2     font-size:12px;
 3     font-weight:bold;
 4     width:120px;    
 5 }
 6 .sp6{
 7     font-size:12px;
 8     font-weight:bold;
 9     width:130px;    
10 }
11 .sp7{
12     font-size:12px;
13     font-weight:bold;
14     width:140px;    
15 }

向以上三个选择器，它们只有宽度设置不同，就可以改写为下面的方式：

.sp5,.sp6,.sp7{
    font-size:12px;
    font-weight:bold;
}

.sp5{
    width:120px;    
}

.sp6{
    width:130px;    
}

.sp7{
    width:140px;    
}

 

posted on 2012-07-18 22:42  郑志伟  阅读(320)  评论(0)  编辑  收藏  举报

导航