<!-- 1. 后代选择器：
包括两个或多个用空格分隔的选择器
外层标记 内层标记 -->
<!-- 内层的标记为外层标记的后代 -->
<!-- h1 em{color:red;} -->
<!-- h1作为父元素，其中包含所有em元素均为红色 -->
<!-- 2. 子代选择器：只选择某元素的子元素的元素
h1>strong{color:red}
选择作为h1元素的子元素直接的后代的所有strong元素中的内容
-->
<!-- 3.相邻兄弟选择器：选择相邻的元素，二者有相同的父元素
h1 + p{font-weight:bold;} -->
<!-- 4. 交集选择器：标记与类选择器组合 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style type="text/css">
/*后代选择器*/
/*h1所有的后代元素中的em*/
h1 em{color:red;}
/* h1作为父元素，其中包含所有em元素均为红色 */
/*子代选择器*/
/*h1中的直接后代子元素strong中的内容*/
h1>strong{
color: #ccc;
}
/*相邻兄弟选择器*/
h1+p{
font-weight:bold;
}
/*紧跟在h1后面d的h1*/
/*其父元素为body*/
/*相邻兄弟选择器*/
p+p{
color: red;
}
/*紧跟在p后面的p元素*/
/*交集选择器*/
p.commont{
color: rgb(138,240,255);
}
/*后代选择器*/
ul em{
color: blue;
}
/*后代选择器*/
li em{
color: yellow;
}
/*直接子代选择器*/
h1+h1{
color: green;
}
/*紧跟在h1后面的h1元素*/
/*子代选择器*/
ol+li{
color: pink;
font-weight: blod;
}
</style>
</head>
<body>
<h1>this is very <em>very</em> important</h1>
<p>第一段落</p>
<p>第一段落</p>
<p>第一段落</p>
<p class="commont">第一段落</p>
<h1>this is very <strong>very</strong> important</h1>
<h1>this is very <i><strong>very</strong></i> important</h1>
<ul>
<li>list item 1
<ol>
<li>list item 1-1</li>
<li>list item 1-2</li>
<li><em>list item 1-3</em>
<ol>
<li>list item 1-3-1</li>
<li>list item 1-3-2</li>
</ol>
<li>list item 1-4</li>
</ol>
</li>
<li>list item 2
<ol>
<li>list item 2-1</li>
<li>list item 2-2</li>
<li>list item 2-3
<ol>
<li>list item 2-3-1</li>
<li>list item 2-3-2</li>
</ol>
<li>list item 2-4</li>
</ol>
</li>
</ul>
</body>
</html>
