写在前面：CSS选择器
网页要显示很多内容，想要为每个内容设置不同的样式，我们就得首先选中要设置样式的内容，CSS选择器就是指明该样式是针对HTML里哪一个元素的。简单的例子，网页上有几段文字，我们想把第一段文字调成红色的，在用CSS写完红色文字样式后，是不是得指明该红色文字样式是针对第一段文字的，那就得用CSS选择器了。CSS选择器提供了多种方式帮你选中要设置样式的元素，这里我们介绍常用的三种：
元素选择器，就是“选中”相同的元素，然后对相同的元素设置同一个CSS样式。
ID选择器，元素选择器范围太广，可以选中所有相同的元素，如果我们想指定某一个元素，就可以为该元素设置一个ID，就是相当于取一个独一无二的名字，然后用ID选择器就可以单独选中它。
class选择器，假如我们想要为不同类型的多个元素设置相同的样式该怎么办呢，那么我们就可以写一个class，然后在要应用这个class样式的元素中声明就可以了。
别罗嗦，来个例子看看！
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style type="text/css"> /*元素选择器,直接用元素名称后跟大括号里写样式内容*/ div{color:red;}/*将所有div里的内容设为红色*/ /*ID选择器，前缀#加ID名称后跟大括号里写样式内容*/ #p1{color:green;}/*将ID为p1的元素里的内容设为绿色*/ /*class选择器，前缀.（英文点号）加class名称后跟大括号里写样式内容*/ .c1{color:blue;}/*将声明class为c1的元素里的内容设为蓝色*/ </style> </head> <body> <div>还有诗和远方的田野</div><!--红色，响应样式color:red--> <p id="p1">还有诗和远方的田野</p><!--绿色，响应样式color:green--> <p class="c1">还有诗和远方的田野</p><!--蓝色，响应样式color:blue--> <span class="c1">还有诗和远方的田野</span><!--蓝色，响应样式color:blue--> <div>还有诗和远方的田野</div><!--红色，响应样式color:red--> </body> </html>