1.類選擇器（通過類名進行選擇） 效果圖： 2.id選擇器（通過id進行選擇） 效果圖： 3.標簽選擇器（通過id進行選擇） 效果圖： 4.分組選擇器（可一次選擇多個標簽以設置相同樣式） 效果圖： 5.後代選擇器（選擇某個標簽的所有後代以設置相同樣式） 效果圖： 6.屬性選擇器（通過屬性（如name ...
1.類選擇器（通過類名進行選擇）
<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> .p1{ color: #00ff00; } .p2{ color: #0000ff; } </style> <body> <p class="p1">這是類選擇器</p> <p class="p2">hello world</p> </body> </html>
效果圖：
2.id選擇器（通過id進行選擇）
<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> #text{ color: red; } </style> <body> <p id="text">這是id選擇器</p> </body> </html>
效果圖：
3.標簽選擇器（通過id進行選擇）
<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> p{ color: #f40; font-size: 25px; } </style> <body> <div> <p>這是標簽選擇器</p> </div> </body> </html>
效果圖：
4.分組選擇器（可一次選擇多個標簽以設置相同樣式）
<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> p,a,li{ color: blue; } </style> <body> <p>這是分組選擇器</p> <p>hello</p> <a href="#">world</a> <div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html>
效果圖：
5.後代選擇器（選擇某個標簽的所有後代以設置相同樣式）
<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> div ul li{ color: red; list-style: none; } </style> <body> <div> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> </body> </html>
效果圖：
6.屬性選擇器（通過屬性（如name屬性）進行選擇以設置相同的樣式）
<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> [name="pra1"]{ color: blue; } [name="pra2"]{ color: red; } </style> <body> <p name="pra1">這是屬性選擇器</p> <p name="pra2">hello world</p> </body> </html>
效果圖：
7.通用選擇器（選擇所有標簽以設置相同樣式）
<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> *{ color: red; } </style> <body> <p>這是通用選擇器</p> <p>hello</p> <p>world</p> </body> </html>
效果圖：
8.兄弟選擇器（選擇兄弟關係的標簽設置樣式）
<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> p+a{ color: green; } </style> <body> <p>這是兄弟選擇器</p> <a>hello world</a> </body> </html>
效果圖：
9.直接父子選擇器（選擇父子關係的標簽中子標簽設置樣式）
<!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> div>p { color: red; } </style> <body> <div> <p>這是直接父子選擇器</p> </div> </body> </html>
效果圖：
