4.2 简单选择器
简单选择器simple selector指选择元素时只存在单个条件。
简单选择器包括六种：标签选择器、类选择器、ID选择器、属性选择器、通配符选择、伪类选择器。
4.2.1 标签选择器
标签选择器tag selector，也称类型选择器type selector、元素选择器element selector。
1、语法
标签名{ /*样式定义*/ }
选择页面内标签名是指定标签名的所有元素，标签名与页面元素的标签一致。
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小步教程</title>
<style>
h4{
margin: 10px 0;
}
p{
border: 1px solid #ccc;
color: #333;
margin: 5px 0;
}
</style>
</head>
<body>
<div>
<h4>小步教程 xiaobuteach.com</h4>
<p>第1段</p>
<p>第2段</p>
<p>第3段</p>
<p>第4段</p>
</div>
</body>
</html>
h4与p两个标签选择器。页面只有1个h4元素，所以h4{ }选择器匹配到1个元素。页面有4个p元素，所以p{ }选择器匹配到4个元素。
运行效果
2、需求场景理解
上述代码对应需求场景：针对所有标题h4设置外边距，针对所有的段落p设置边框border、字体颜色、外边距。使用哪种选择器是根据需求场景确定，标签选择器符合当前需求。当需求场景发生变化，使用选择器类型相应发生变化。
3、选择思维与函数思维
从函数角度理解选择器。选择器样式的应用原理类似于其它语言的函数（方法），分为定义与调用。选择器定义样式，元素根据自身设置调用样式，例如标签选择器样式的调用是根据元素的标签名。
从选择角度理解选择器。“选择”的思考顺序与函数的思考顺序相反。选择思维是先有元素后有选择器，函数思维是先有选择器再有元素。
页面开发时，建议先编写HTML代码再写CSS代码，这时使用选择思维。当选择器出现问题调试页面时，会思考“这个选择器为什么不能匹配到这个元素”，此时使用函数思维。
