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;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;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;}
例：
1 <html> 2 <head> 3 <title>并集选择器</title> 4 <style type="text/css"> 5 h3{color:yellow;font-size:30px;} 6 p{color:blue;font-size:20px;} 7 .p1,h3{color:red;font-size:16px;} 8 </style> 9 </head> 10 <body> 11 <h3>这是并集选择器</h3> 12 <p class="p1">这是段落</p> 13 <p>段落</p> 14 </body> 15 </html>
（3）“后代”选择器
.class h3{color:red;fon-size:25px;}
例：
1 <html> 2 <head> 3 <title>后代选择器</title> 4 <style type="text/css"> 5 p strong{color:red;} 6 ul .li1{color:red;font-size:16px;} 7 ul li ul #li2{color:green;} 8 </style> 9 </head> 10 <body> 11 <p> 12 <strong>加粗</strong> 13 </p> 14 <ul> 15 <li>a</li> 16 <li class="li1">b</li> 17 <li> 18 <ul> 19 <li>c</li> 20 <li id="li2">d</li> 21 </ul> 22 </li> 23 </ul> 24 </body> 25 </html>
3.CSS继承性
例：
1 <html> 2 <!-- 3 1. 给整个页面填一个一个背景 4 2. 给em添加一个样式样倾斜效果消失 5 3. 改变第一层UL的样式为蓝色，16px 6 4. 改变第二层的UL的样式为红色 14px 7 5. 改变body下面的ul下面的li下面的ol下面的li为#f8f8f8 8 --> 9 10 <head> 11 <title>css继承结构</title> 12 <style type="text/css"> 13 body{background-color:#89C869;} 14 ul{color:blue;font-size:16px;} 15 ul ul{color:red;font-size:14px;} 16 ul li ol li{color:#f8f8f8;} 17 h2 em{font-style:normal;} 18 ul li ul li ul{color:black;;} 19 </style> 20 </head> 21 <body> 22 <h2><em>网页设计课程</em></h2> 23 欢迎大家学习网页设计课程 24 <ul> 25 <li>在这里,你可以学到: 26 <ul> 27 <li>HTML</li> 28 <li>CSS 29 <ul> 30 <li>CSS初级</li> 31 <li>CSS中级</li> 32 <li>CSS高级</li> 33 </ul> 34 </li> 35 <li>JavaScript</li> 36 </ul> 37 </li> 38 <li>你还可以学习到: 39 <ol> 40 <li>fireworks</li> 41 <li>flash</li> 42 <li>dreamweaver</li> 43 </ol> 44 </li> 45 </ul> 46 如果您有任何问题及时提问 47 </body> 48 </html>