css的9个常用选择器
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>
效果图：
