<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{color: red;font-size: 29px} /*通用选择器，对所有内容*/ p{background: blue} /*标签选择器，只要是p标签都变*/ div{background:grey} /*对那个标签选择器*/ #p1{background: brown} /*对id为p1的div添加*/ .c1{background:royalblue} div p{font-size: 25px} /*后代选择器调用方法div标签下的p标签*/ #outer>.c2,#bl2{font-size: 50px;background:yellow} /*<!--后代选择器-->获取嵌套在div里的标签.c2 ,>表示子代选择器的符号也可以不加*/ /*并列选择器使用*/ /*选择器的符号后代的用空格，子代的用>,并列的用逗号*/ #bl,.cc2{font-size: 28px;background: chartreuse} </style> </head> <body> <p>hello p</p> <p id="p1">hello p12345</p> <div>hello div</div><!----> <div class="c1">这个是用的class1</div> <div class="c1">这个是用的class2</div> <!--class可以同名而id不可以--> <div id="outer"> <!--后代选择器--> <p>baohan p1</p> <div class="c2">baohan div</div> <p>baohan p2</p> </div> <P id ="bl">并列选择器</P> <div id="id5"> <p>并列选择器1</p> <div class="cc2">并列选择器2</div> <p id="bl2">并列选择器3</p> </div> </body> </html>