1.子代选择器（>）
子代选择器主要用于选择某个元素的第一级子元素。例如希望选择只作为h1元素子元素的strong元素，可以这样写：h1>strong。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>子代选择器的应用</title>
<style type="text/css">
h1>strong{
color:red;
font-size:20px;
font-family:"微软雅黑";
}
</style>
</head>
<body>
<h1>这个<strong>知识点</strong>很<strong>重要</strong></h1>
<h1>一定要学<em><strong>好</strong></em>！</h1>
</body>
</html>
第一个h1标签中的<strong>是h1的子元素，第二个h1标签中的<strong>是h1的孙元素，所以只有第一个h1标签应用了样式。
2.兄弟选择器（+、~）
兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后的兄弟元素。分为临近兄弟选择器和普通兄弟选择器两种。
<1>临近兄弟选择器
该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>临近兄弟选择器的应用</title>
<style type="text/css">
p+h2{
color:green;
font-family:"宋体";
font-size:20px;
}
</style>
</head>
<body>
<h2>《次北固山下》</h2>
<p>客路青山外，行舟绿水前。</p>
<h2>潮平两岸阔，风正一帆悬。</h2>
<h2>海日生残夜，江春入旧年。</h2>
<h2>乡书何处达？归雁洛阳边。</h2>
</body>
</html>
只有紧跟p元素的h2元素应用了代码中设定的样式。
2.普通兄弟选择器
普通兄弟选择器使用“~”来链接前后两个选择权。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>普通兄弟选择器</title>
<style type="text/css">
p~h2{
color:pink;
font-family:"微软雅黑";
font-size:20px;
}
</style>
</head>
<body>
<p>海上生明月，天涯共此时。<p>
<h2>情人怨遥夜，竟夕起相思。</h2>
<h2>灭烛怜光满，披衣觉露滋。</h2>
<h2>不堪盈手赠，还寝梦佳期。</h2>
</body>
</html>
p元素的所有兄弟元素h2都应用了代码中所设定的样式。