标签：
1.基本CSS选择器
（1）标记选择器
<style>
h1{ color:red; font-size:25px;}
</style>
例：
1 <html> 2 <head> 3 <title>标记选择器</title> 4 <style type="text/css"> 5 h2{background-color:red;color:blue;text-align:center;} 6 p{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;} 7 </style> 8 </head> 9 <body> 10 <h2>这是标记选择器</h2> 11 <p>标记选择器的段落</p> 12 </body> 13 </html>
（2）类别选择器
<style type="text/css">
.p1{background-color:red;color:blue;text-align:center;width:300px;height:300px;line-height:300px;}
</style>
例：
1 <html> 2 <head> 3 <title>类别选择器</title> 4 <style type="text/css"> 5 h2{background-color:red;color:blue;text-align:center;} 6 .p1{background-color:red;color:blue;text-align:center;width:300px;height:300px;line-height:300px;} 7 .p2{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;} 8 </style> 9 </head> 10 <body> 11 <h2>这是类别选择器</h2> 12 <p class="p1">类别选择器的段落！</p> 13 <p class="p2">段落！</p> 14 </body> 15 </html>
（3）ID选择器
<style type="text/css">
#p1{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;}
</style>
例：
1 <html> 2 <head> 3 <title>id选择器</title> 4 <style type="text/css"> 5 h2{background-color:red;color:blue;text-align:center;} 6 #p1{background-color:blue;color:red;text-align:center;width:300px;height:300px;line-height:300px;} 7 #p2{background-color:red;color:blue;text-align:center;width:300px;height:300px;line-height:300px;} 8 </style> 9 </head> 10 <body> 11 <h2>这是id选择器</h2> 12 <p id="p1">段落</p> 13 <p id="p2">这是一个段落</p> 14 </body> 15 </html>
2.复合CSS选择器
（1）“交集”选择器
h3.class{color:red;font-size:25px;}
例：
1 <html> 2 <head> 3 <title>交集选择器</title> 4 <style type="text/css"> 5 p.p1{color:yellow;} 6 p{color:green;font-size:10px;} 7 .p1{color:blue;} 8 h2{color:red;font-size:14px;} 9 </style> 10 </head> 11 <body> 12 <h2>这是标题</h2> 13 <p class="p1">段落1</p> 14 <p>段落2</p> 15 </body> 16 </html>
（2）“并集”选择器
.class,h3{color:red;fon-size:25px;}
（3）
HTML+CSS Day05 基本CSS选择器、复合CSS选择器与CSS继承性
标签：
原文地址：http://www.cnblogs.com/kylyww/p/5235989.html
