1. 前言
在之前学习CSS的过程中，大家想必也发现了一些问题。
通过style属性编写CSS代码，带来的第一个问题，就是代码比较杂乱，HTML中混杂着CSS的部分，看起来就不愉快。
第二个问题，就是每个标签的CSS都得手动编写，哪怕有几个标签我们想给他们设置一样的样式，也得完全从头编写，非常繁琐。
本篇就来介绍下CSS中的基本选择器，可以非常好的解决此类问题。
而在实际项目开发过程中，CSS一般也是通过选择器应用到标签元素上的。
2. 什么是选择器
我们知道，一组CSS代码，就是一组样式规则，之前我们通过style属性，将CSS样式规则设置到标签元素上。
选择器就是标签元素的筛选器，同样是CSS样式规则，我们可以通过选择器，来选择应用到某个或者某些标签元素上。也就是说，选择器是用来选择标签元素的。
3. 使用元素选择器
如果我们想给四个段落设置文本颜色为蓝色，使用style属性设置，则代码如下：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <p style="color:blue;">黄河远上白云间</p> <p style="color:blue;">一片孤城万仞山</p> <p style="color:blue;">羌笛何须怨杨柳</p> <p style="color:blue;">春风不度玉门关</p> </body> </html> 而如果我们使用元素选择器，则改为如下操作： 第一步，在head区域添加<style>标签，head区域可设置应用于整个网页的规则，例如charset。此处编写的style标签，其内部的规则也是应用于整个网页的。 <head> <meta charset="utf-8"> <style> </style> </head> 第二步，在<style>中编写选择器，也就是说我们想选择哪些HTML标签元素，来修改他们的样式。此处我们想修改的是网页上所有p元素的样式，所以我们写一个p，代表我们选择p元素。 <head> <meta charset="utf-8"> <style> p </style> </head> 第三步，为选择器添加样式。我们已经通过选择器选择了所有p元素，此时可以为其设定样式了，代码如下： <head> <meta charset="utf-8"> <style> p { color: blue; } </style> </head> 注意，p后面的大括号，表示p的样式规则集。也就是说大括号内的样式代码，都会应用于p这个选择器。大括号内就写CSS代码就行了，还是原来cssName:cssValue;这种格式。 4. 网页整体解析 我们来看下改完之后的网页代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> p { color: blue; } </style> </head> <body> <p>黄河远上白云间</p> <p>一片孤城万仞山</p> <p>羌笛何须怨杨柳</p> <p>春风不度玉门关</p> </body>
