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; }