<!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> 