在上一篇的博客中我们已经熟悉CSS语法，对于CSS代码格式也有了一些认识。下面我就来说一下CSS代码式：
选择器名称 { 属性名：属性值；属性名：属性值；......}
属性与属性之间用分号隔开；属性与属性值直接使用冒号连接；如果一个属性有多个属性值的话，那么多个属性值用空格隔开。
上述提到了我这一篇博客所要说的主题，就是选择器。选择器就是指定CSS语法要作用的标签，那个标签的名称
就是选择器。
基本的选择器可分为三种：
a)html标签名选择器：使用的是html的标签名，又叫元素选择器。
b)class选择器;使用的是标签内的class属性，又叫类选择器。
c)id选择器：使用的是标签内的id属性。
每一个标签都定义了class属性和id属性，用于对标签进行标识，方便对标签进行操作。在定义中，多个标签的
class属性值可以相同，而id属性值必须唯一，因为JavaScript中经常使用。
### 一,CSS元素选择器
最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。如果设置 HTML 的样式，选
择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身。
下面举个最简单的例子：
~~~
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS元素选择器演示</title>
<style type="text/css">
html {color:#00FFFF;}
h1 {color:#FFFF00;}
h2 {color:#FF0000;}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<p>这是一段普通的段落</p>
</body>
</html></span>
~~~
浏览器显示结果为：
从上述的结果来看选择器的优先级还是有一定的选择性的，html选择器作用的是网页中的全部字体，而h1和h2作
用的仅仅是自己标签名的标签。
可以将某个样式从一个元素切换到另一个元素。假设您决定将上面的段落文本（而不是 h1 元素）设置为p。只
需要把 h1 选择器该为 p：
~~~
<span style="font-size:18px;">html {color:#00FFFF;}
p {color:#FFFF00;}
h2 {color:#FF0000;}</span>
~~~
浏览器显示结果为：
### 二,选择器分组
假设希望 h2 元素和段落都有灰色。为达到这个目的，最容易的做法是使用以下声明：
h2, p {color:gray;}
将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这
两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将
完全不同。还是上述的例子：
~~~
<span style="font-size:18px;">html {color:#00FFFF;}
h2,p{color:#FFFF00;}</span>
~~~
浏览器显示结果为：
可以将任意多个选择器分组在一起，对此没有任何限制。
例如，如果您想把很多元素显示为灰色，可以使用类似如下的规则：
body, h2, p, table, th, td, pre, strong, em {color:gray;}
通过分组，创作者可以将某些类型的样式“压缩”在一起，这样就可以得到更简洁的样式表。
再举一个简单的示例：
以下的两组规则能得到同样的结果，不过可以很清楚地看出哪一个写起来更容易：
~~~
<span style="font-size:18px;">/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}</span>
~~~
使用第二种代码为：
~~~
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS元素选择器演示</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {color:blue;}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<h3>这是 heading 3</h3>
<h4>这是 heading 4</h4>
<h5>这是 heading 5</h5>
<h6>这是 heading 6</h6>
</body>
</html></span>
~~~
浏览器显示结果为：
三通配符选择器(感觉还是划分到元素选择器比较好，说到底还是用标签名的一类选择器)
CSS2 引入了一种新的简单选择器 - 通配选择器（universal selector），显示为一个星号（*）。该选择器可以与
任何元素匹配，就像是一个通配符。
例如，下面的规则可以使文档中的每个元素都为红色：* {color:red;}这个声明等价于列出了文档中所有元素的一
个分组选择器。利用通配选择器，只需敲一次键（仅一个星号）就能使文档中所有元素的 color 属性值指定为 red。
~~~
<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS元素选择器演示</title>
<style type="text/css">
* {color:red;}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<h2>这是 heading 2</h2>
<h3>这是 heading 3</h3>
<h4>这是 heading 4</h4>
<p>这是一段<b>普通</b>的段落文本。</p>
</body>
</html></span>
~~~
浏览器显示结果为：
### 四,声明分组
我们既可以对选择器进行分组，也可以对声明分组。
假设您希望所有 h1 元素都有红色背景，并使用 28 像素高的 Verdana 字体显示为蓝色文本，可以写以下样式：
~~~
<span style="font-size:18px;">h1 {font: 28px Verdana;}
h1 {color: blue;}
h1 {background: red;}</span>
~~~
但是上面这种做法的效率并不高。尤其是当我们为一个有多个样式的元素创建这样一个列表时会很麻烦。相反，
我们可以将声明分组在一起：
~~~
h1 {font: 28px Verdana; color: white; background: black;}
~~~
这与前面的 3 行样式表的效果完全相同。
注意，对声明分组，一定要在各个声明的最后使用分号，这很重要。浏览器会忽略样式表中的空白符。
### 五,结合选择器和声明的分组
我们可以在一个规则中结合选择器分组和声明分组，就可以使用很少的语句定义相对复杂的样式。
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS元素选择器演示</title>
<style type="text/css">
h1, h2, h3, h4, h5, h6 {
color:gray;
background: white;
padding: 10px;
border: 1px solid black;
font-family: Verdana;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
~~~
浏览器显示：
涉及到选择器优先级的问题，我会用专门的一篇博客来解释说明这个问题。
- 前言
- HTML学习1：Dreamweaver8的安装
- HTML学习2：初识HTML
- HTML学习3：常用标签之文本标签
- HTML学习4：常用标签之列表标签
- HTML学习5：常用标签之图像标签
- HTML学习6：常用标签之超链接标签
- HTML学习7：常用标签之表格标签
- HTML学习8：常用标签之框架标签
- HTML学习9：常用标签之表单标签
- HTML学习10：表单格式化
- HTML学习11：HTTP 方法
- HTML学习12：其他常见标签之头标签
- HTML学习13：其他常见标签之体标签
- 轻松学习JavaScript一：为什么学习JavaScript
- 轻松学习JavaScript二：JavaScript语言的基本语法要求
- 轻松学习JavaScript三：JavaScript与HTML的结合
- 轻松学习JavaScript四：JS点击灯泡来点亮或熄灭这盏灯的网页特效映射出JS在HTML中作用
- 轻松学习JavaScript五：JavaScript的变量和数据类型
- 轻松学习JavaScript六：JavaScript的表达式与运算符
- 轻松学习JavaScript七：JavaScript的流程控制语句
- 轻松学习JavaScript八：JavaScript函数
- 轻松学习JavaScript九：JavaScript对象和数组
- 轻松学习JavaScript十：JavaScript的Date对象制作一个简易钟表
- 轻松学习JavaScript十一：JavaScript基本类型(包含类型转换)和引用类型
- 轻松学习JavaScript十二：JavaScript基于面向对象之创建对象(一)
- 轻松学习JavaScript十二：JavaScript基于面向对象之创建对象(二)
- 轻松学习JavaScript十三：JavaScript基于面向对象之继承(包含面向对象继承机制)
- 轻松学习JavaScript十四：JavaScript的RegExp对象(正则表达式)
- 轻松学习JavaScript十五：JavaScript之BOM简介
- 轻松学习JavaScript十六：JavaScript的BOM学习(一)
- 轻松学习JavaScript十七：JavaScript的BOM学习(二)
- 轻松学习JavaScript二十九：JavaScript中的this详解
- CSS基础学习一：CSS概述
- CSS基础学习二：如何创建 CSS
- CSS基础学习三：CSS语法
- CSS基础学习四：元素选择器
- CSS基础学习五：类选择器
- CSS基础学习六：id选择器
- CSS基础学习七：属性选择器
- CSS基础学习八：派生选择器
- CSS基础学习九：伪类
- CSS基础学习十：伪元素
- CSS基础学习十一：选择器的优先级
- CSS基础学习十二：CSS样式
- CSS基础学习十三：盒子模型
- CSS基础学习十四：盒子模型补充之display属性设置
- CSS基础学习十五：盒子模型补充之外边距合并
- CSS基础学习十六：CSS盒子模型补充之border-radius属性
- CSS基础学习十七：CSS布局之定位
- CSS基础学习十八：CSS布局之浮动
- CSS基础学习十九：CSS布局之图文混排，图像签名，多图拼接和图片特效
- DIV+CSS实操一：经管系网页总体模块布局
- DIV+CSS实操二：经管系网页添加导航栏和友情链接栏
- DIV+CSS实操三：经管系网页内容模块添加标题栏和版权信息模块
- DIV+CSS实操四：经管系网页内容模块内容添加(一)
- DIV+CSS实操五：经管系网页内容模块内容添加(二)
- DIV+CSS实操六：经管系网页添加导航栏下拉菜单
- DIV+CSS实操七：中文系内容模块控制文本不换行和超出指定宽度后用省略号代替
- JS中实现字符串和数组的相互转化