id选择器：
index.html:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <link href="MyCss1.css" type="text/css" rel="stylesheet"> 7 </head> 8 <body> 9 <p id="pid">hello css <a href="http://www.jikexueyuan">学院</a></p> 10 <div id="divid"> <!-- 使用的最多 --> 11 这是第一个div 12 </div> 13 </body> 14 </html>
MyCss.css
1 #pid a{ 2 color:blue; 3 } 4 #divid{ 5 color:red; 6 }
类选择器：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <link href="MyCss2.css" type="text/css" rel="stylesheet"> 7 </head> 8 <body> 9 <p class="pclass">这是一个class效果<a href="http:www.baidu.com">百度</a></p> 10 <div class="divclass"> 11 Hello DivClass 12 </div> 13 </body> 14 </html>
1 .pclass a{ 2 color:red; 3 } 4 .divclass{ 5 color:blue; 6 }
属性选择器：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <style type="text/css"> 7 [title]{ 8 color:blue; 9 } 10 [title=te]{ 11 color:red; 12 } 13 </style> 14 </head> 15 <body> 16 <p title="t">属性选择器</p> 17 <p title="te">属性和值选择器</p> 18 </body> 19 </html>