首页 > 代码库 > 我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级
我给女朋友讲编程CSS系列(2)- CSS语法、3大选择器、选择器优先级
首先看一下使用Css设置h1标签字体颜色和大小的例子，效果图如下：
新建一个网页test.html,然后复制粘贴下面的内容：
<html><head><style type="text/css">h1 {color:red; font-size:14px;}</style></head><body ><h1>使用Css让h1标签字体变红</h1></body></html>
在浏览器中打开test.html，效果如上图。
改变标签h1字体的是下面这句Css代码：
h1 {color:red; font-size:14px;}
h1是选择器，它代表了本页面所有的h1标签，大括号{}内是针对h1标签进行的操作，比如color:red设置了h1标签的字体为红色；font-size:14px设置h1标签字体大小为14像素。
Color是属性，表示字体颜色，red是对应的值，这样可以设置字体为红色；color:red合起来的专业叫法是“声明”，本质上就是一对属性值，Css本质上也就是通过设置标签的属性值，来改变标签的外在表现，这就叫样式。
注意下面的几个规则：
(1) 每一对属性声明都要放在大括号中，多对使用分号隔开；
(2) 属性与值中间使用英文的冒号隔开，代码中的标点符号基本都需要使用英文输入法状态下的，输入中文下的标点符号会错误。
(3) CSS代码中增加一些空格，不影响效果，比如为了增加可读性，可以这样写：
h1
{
color:red;
font-size:14px;
}
(4) CSS对大小写是不敏感的，比如H1和h1这两个选择符对CSS来说，选择的都是<h1>标签，不过如果使用id或class标识标签，这时就要区分大小写了，比如#Top和#top选择的是不同id的标签。
(5) 一条CSS规则可以包含多个声明，比如h1 {color:red; font-size:14px;}就包括两条声明，最后一个声明后的分号可以去掉，良好的编码习惯是加上最后的分号；
(6) 多个选择符可以组合起来。比如需要设置h1到h5标签的字体都设置为红色，14像素，那么可以这样设置：
h1, h2, h3, h4, h5 {color:red; font-size:14px;}
这样，h1到h5标签的字体都是红色，大小都是14像素，这对于需要相同样式的标签十分重要，比如可以把一些公共的部分写到一块。
只需要在h1标签后面添加逗号，就可以添加多个选择符，它们中间可以增加一些空格，增加可读性。
(7) 一个选择符可以设置多次样式。比如要求h1到h5标签的字体都为红色，另外要求h1的字体加粗，那么可以这样设置：
h1, h2, h3, h4, h5 {color:red; }
h1 { font-weight : bold; }
这是CSS编码中十分重要的一个技巧，先把需要相同的样式写到一起，然后写需要特殊处理的样式，而且浏览器是按照从上到下的顺序设置标签样式的，即便设置了相同的属性值，下面的属性值也会覆盖上面的。
下面介绍一下CSS的3大选择器。
1， 标签选择器
顾名思义，标签选择器就是直接把标签的名字当做选择器。
常用的标签选择符如下：
标签名 | CSS选择器 | 备注 |
body | body | body标签选择符 |
h1,h2,h3,h4,h5,h6 | h1,h2,h3,h4,h5,h6 | 标题h1到h6标签选择符 |
table | table | 表格table标签选择符 |
td | td | 单元格td标签选择符 |
a | a | 超链接a标签选择符 |
img | img | 图像img标签选择符 |
div | div | 块标签div选择符 |
p | p | 段落p标签选择符 |
ul | ul | 无序列表ul标签选择符 |
li | li | 列表项li标签选择符 |
使用的时候，直接写标签名称就行，比如body。
当设置了某个标签的样式时，这个设置会对本页面所有的相同标签起作用。
2， ID选择器
ID代表了唯一，就像身份证号一样，每一个人的都不相同。页面元素的ID也不能相同，一个ID在html中只能出现一次。
设置标签的id，相当于把id和值当做一对属性值，比如<p id=”p1”> 段落1 </p>，这就设置了段落标签p的id为p1。
Id选择符，直接使用 #id，把id替换为对应标签的id值，就可以精确的选择某个标签。比如选择刚才的p标签：#p1 。
注意：
(1) 一个Html网页中id只能出现一次；
(2) id是区分大小写的，#p1和#P1代表的是不同的id选择器，选择的元素不同；
(3) id选择器是最精准的选择器，可以定位到某个具体的唯一元素。
3，Class类选择器
Class类选择器，代表了某一类相同的样式，“物以类聚，人以群分“，比如可以把红色字体定义为一类，所有需要设置红色字体的标签都加上这个类。
给标签添加类，实际也是把类和类值当做一对属性值添加到标签中，比如<p class=””red”> 段落1 </p>，这就设置了这个段落的class为red。
class类选择器，直接使用 .class，把class替换为对应的类值。这样就可以为具有相同类的标签应用相同的样式了。比如：
.red { color : red; } 这设置了类red的标签字体颜色为红色。
注意：
(1) 多个标签可以使用相同的类，相当于给它们设置了相同的样式，比如：
<h1 class=””red”> 标题1 </h1>
<p class=””red”> 段落1 </p>
这样可以把h1和p都设置为红色字体。
(2) 一个标签可以设置多个类，相同于讲一个标签设置了多种样式，比如：
<p class=””red bold”> 段落1，红色，加粗 </p>
定义粗体为一类样式 .bold { font-weight : bold; } font-weight意思是字体重要性，bold就是加粗的意思。
这样段落p会同时具有类red和类bold的样式。
注意：多个类名中间使用空格间隔。
CSS选择器的优先级
1， 标签选择器
对标签p应用样式，效果图如下：
新建一个网页a.html，复制粘贴下面的代码：
<html><head><style type="text/css">p { color:red;}</style></head><body ><p class="green" id="p1">这是一个段落，class="green"，id="p1"，设置p标签为红色</p></body></html>
说明：
代码中给p标签添加了id和class，但是使用的是标签选择器p设置的样式。
2， Class类选择器
对类green应用样式，效果图如下：
修改a.html的代码，修改后如下：
<html><head><style type="text/css">.green { color:green;}p { color:red;}</style></head><body ><p class="green" id="p1">这是一个段落，class="green"，id="p1"，设置p标签为红色</p></body></html>
说明：.green { color:green;} 为类green设置字体颜色为绿色。
从代码中可以看到，.green的设置在先，p的设置在后，但是结果仍然显示的为.green的样式，这说明了类选择器的优先级大于标签选择器。
结论：类选择器优先级 > 标签选择器优先级
3， id选择器
对id为p1的标签应用样式，效果图如下：
修改a.html的代码，修改后如下：
<html><head><style type="text/css">#p1 { color:blue;}.green { color:green;}p { color:red;}</style></head><body ><p class="green" id="p1">这是一个段落，class="green"，id="p1"，设置p标签为红色</p></body></html>
说明：#p1 { color: blue;} 把id为p1的元素字体颜色设置为蓝色。
从代码中可以看到，#p1在最前面，但是结果仍然显示的为#p1的样式，这说明了id选择器具有最高优先权。
结论：id选择器优先级 > 类选择器优先级 > 标签选择器优先级