交集选择器：标签+类（ID）选择器{属性：值；}。即要满足使用了某个标签，还要满足使用了类（id）选择器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div.box{
color:#b6ff00;
}
p#miss{
color:#ff6a00;
}
</style>
</head>
<body>
<div class="box">哈哈</div>
<p class="box">哈哈</p>
<p id="miss">哈哈</p>
</body>
</html>
并集选择器：选择器+，+选择器+，选择器{属性:值;}。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.box,p,strong{
color:#ff6a00;
}
</style>
</head>
<body>
<div class="box">哈哈</div>
<p>哈哈</p>
<strong>哈哈</strong>
</body>
</html>
后代选择器：选择器+空格+选择器{属性：值;}。后代选择器首选要满足包含（嵌套）关系。父集元素在前边，子集元素在后边。无限制隔代。只要能代表标签，标签、类选择器、ID选择器自由组合。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div .box p{
color:#ffd800;
}
</style>
</head>
<body>
<div>
<div class="box">
<p>哈哈</p>
</div>
</div>
</body>
</html>
子代选择器：选择器>选择器{属性:值;}。选中直接下一代元素，无法选中孙子代。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
div>p{
color:#ff6a00;
}
</style>
</head>
<body>
<div>
<p>哈哈哈</p>
</div>
</body>
</html>