前戏
前面我们说过CSS规则由选择器和声明组成，我们要给标签设置属性，那我们就要找到对应的标签，CSS选择器可以帮我们找到我们需要的标签
css选择器有：
标签选择器
类选择器
ID选择器
全局选择器
群组选择器
后代选择器
标签选择器
标签选择器前面我们用过，它是以HTML标签作为选择器
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> p{color:red} h1,div{color:blue} </style> </head> <body> <h1>h1标签</h1> <div>css选择器</div> <p>标签选择器</p> <p>类选择器</p> <p>ID选择器</p> </body> </html>
注意：有多个标签之间用，隔开
类选择器
同一个元素可以设置多个类，之间用空格隔开
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> .p1{color:red} .p2,.p3{color:blue} </style> </head> <body> <h1 class="p1">h1标签</h1> <div>css选择器</div> <p class="p1">标签选择器</p> <p class="p2">类选择器</p> <p class="p3">ID选择器</p> </body> </html>
注意：多个类时用，隔开
如果我们只想给p标签下的class=p1的设置怎么办？
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> p.p1{color:red} </style> </head> <body> <h1 class="p1">h1标签</h1> <div>css选择器</div> <p class="p1">标签选择器</p> <p class="p2">类选择器</p> <p class="p3">ID选择器</p> </body> </html>
在类选择器前面加上标签名就可以了
ID选择器
id选择器和类选择器差不多，类选择器用的是点，id选择器用的是#
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style> #i1{color: green} </style> </head> <body> <p id="i1">标签选择器</p> <p id="i2">类选择器</p> <p id="i3">ID选择器</p> </body> </html>