4.1 为什么使用选择器
4.1.1 内联样式的问题
HTML代码与CSS代码混合在一起，可读性很差，并且很多重复代码。
<body style="margin: 0;">
<div style="background-color: #0aaa76;text-align: center;padding-top: 15px;padding-bottom: 15px;">
<h1 style="color:#fff;margin: 0;">小步教程企业简介项目 www.xiaobuteach.com</h1>
</div>
</body>
需要一种机制将HTML代码与CSS代码分离，并且实现代码重用。
4.1.2 作用1：通过选择器分离元素与样式
为了将CSS属性设置从元素分离，则需要在元素外部“针对（选择）相应的元素”，然后设置样式。选择器的字面意思：先 “选择（针对）元素”，然后对选择元素设置样式。选择元素的个数可能是：0、1或多个。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
body{
margin: 0;
}
div{
background-color: #0aaa76;text-align: center;padding-top: 15px;padding-bottom: 15px;
}
h1{
color:#fff;margin: 0;
}
</style>
</head>
<body>
<div>
<h1>小步教程企业简介项目 www.xiaobuteach.com</h1>
</div>
</body>
</html>
上述代码，body内的元素结构清晰，CSS选择器的每个CSS属性一行，代码可读性强。
4.1.3 作用2：通过选择器重用样式
内联样式写法
<body>
<p style="border: 1px solid #ccc;color: #333;">
小步教程 xiaobuteach 第1段
</p>
<p style="border: 1px solid #ccc;color: #333;">
第2段
</p>
<p style="border: 1px solid #ccc;color: #333;">
第3段
</p>
</body>
3个段落p的CSS属性设置完全重复，以后修改需修改3处。
选择器写法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
p{
border: 1px solid #ccc;
color: #333;
}
</style>
</head>
<body>
<p>小步教程 xiaobuteach 第1段</p>
<p>第2段</p>
<p>第3段</p>
</body>
</html>
选择器定义一次样式，选择器选择到3个元素，这3元素同时应用选择器内定义样式，实现代码重用。“选择”、“针对”，也称“匹配”，表达相同意思。上述选择器匹配3个元素。
试一试。将p{ }改成div{ }，会匹配几个元素。
4.1.4 选择器的研究内容
选择器并不关心内部的具体样式，即花括号里的内容，具体样式根据需求编写。
{
border: 1px solid #ccc;
color: #333;
}
选择器关心花括前的内容，它表示“选择（匹配）哪些元素”。
p{
/* 具体样式内容并不关注 */
}
p{ }匹配标签名是p的所有元素。
