一、元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
/* -- 通过元素名称来统一选择设定 -- */
p{color: brown;}
/* -- 一个class两个名称的选择设定 -- */
.a{color: blue;}
.b{color:green;} /* 2个CLASS名称，按先后顺序执行 */
.b.c{color: cyan;} /* 多个class名称，可以一起选择设定*/
/* -- 元素名称+class名称的选择设定 -- */
p.c{
color:coral;
}
/* -- 多个元素可以放在一起选择设定,用【,】号 -- */
h1,div,.line,p.d{color:red;}
/* -- 父元素选择器(上一级元素) -- */
/* -- 子元素选择器（下一级元素） -- */
div.box1>h3{
color:rgb(118, 96, 197);
}
/* 找向下某一级的元素 */
div.box1>div>h3{
color:rgb(51, 122, 42);
}
/* -- 祖先元素选择器（上n级元素） -- */
/* -- 后代元素选择器（下n级元素） -- */
div.box2 h3{
color:rgb(235, 127, 77);
}
/* -- 兄弟元素选择器（同级元素） -- */
.box3 h2+h4{color:chartreuse;} /* 紧挨着下一个元素（无效） */
.box3 h2+div{color:chartreuse;} /* 紧挨着下一个元素（有效） */
.box3 h2~h4{color:rgb(233, 10, 203);} /* 选择下边所有兄弟元素 */
.box3 h2~div{color:rgb(233, 10, 203);} /* 选择下边所有兄弟元素 */
</style>
<body>
<H1> 李白的诗</H1>
<div>-----------------------</div>
<div class="line">==================</div>
<p class="a b c">白日依山尽 </p>
<p class="a">黄河入海流 </p>
<p class="c">欲穷千里目 </p>
<p class="d">更上一层楼 </p>
<div>==================</div>
<div class="box1">
<h2>============ box1</h2>
<h3> 111111111</h3>
<h3> 222222222</h3>
<h3> 333333333</h3>
<h3> 444444444</h3>
<div>
<h3>后代元素</h3>
</div>
</div>
<div class="box2">
<h2>============ box2</h2>
<h3> 111111111</h3>
<h3> 222222222</h3>
<h3> 333333333</h3>
<h3> 444444444</h3>
<div>
<h3>后代元素</h3>
</div>
</div>
<div class="box3">
<h2>============ box3</h2>
<div>紧挨着</div>
<h4 class="ddd"> 111111111</h4>
<h4> 222222222</h4>
<h4> 333333333</h4>
<h4> 444444444</h4>
<div>
<h3>后代元素</h3>
</div>
</div>
<div>
<ul>
<li>
<a href="#" class="active">1</a>
</li>
<li>
<a href="#">2</a>
</li>
</ul>
</div>
</body>
</html>
