一、关系选择符 （四种）
例：
类别及解析：
/* 包含选择符 */
.son1 a{color:red;}
选择所有被E元素包含的F元素。意思是选择所有被div中son1类元素包含的所有a标签，上面的结果为son1和grandson这两个a标签字体都为红色。
/* 子选择符 */
.son1>a{color:red;}
选择所有作为E元素的子元素F。意思是.son1说包含的子元素，上面结果为只有son1的a标签字体变红色，而grandson中的a标签字体不变。
/* 相邻选择符 */
.son1+div{color:green;}
选择紧贴在E元素之后F元素。即son2这个div中的字体变成绿色。
/* 兄弟选择符*/
.son1~div{color:yellow;}
选择E元素所有兄弟元素F。即son2和son3这两个div中的字体都变成黄色。
完全实例：
1 2 3 4 547 48Document 6 23 }24 25 26 27
这是h3标题
49 这是小标题50这是内容
51这是内容
52这是h3标题
53 这是小标题54这是内容
55这是内容
56二、id 及 class 选择符
id 及 class 均是css 提供由用户自定义标签名称的选择符，用户可以使用选择符id及class 来对页面中的xhtml标签进行自定义名称，从而达到扩展xhtml标签及组合html标签的目的。
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
例： id 选择符
1这是一个段落
2 #p1 {3 font-size:12px;4 font-weight:bold;5 }
例： class 选择符
1这是一个段落
2 .p1 {3 font-size:12px;4 font-weight:bold;5 }
在网页中，每个id名称中只能使用一次，不得重复。
与id 不同，class 允许重复使用。比如页面中的多个元素，都可以使用同一个样式定义。
完全实例：如上所说，id建议使用唯一，相当于人的身份证。
1 2 3 4 5Document 6 14 15 16 17我是h2标题
18我是h2标题
19我是h2标题
20 21
三、伪类选择符
例子以及解析：
1 2 3 4 532 33Document 6 26 27 28 我是a标签29
解析：a:link表示未被访问前的样式；a:visited表示已被访问后的样式；a:hover表示鼠标悬停时的样式；a:active设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。Input:focus设置元素在成为输入焦点(该元素的onfocus事件发生)时的样式。
接着实例 :
1 2 3 4 5Document 6 20 21 22
- 23
- 我是列表1 24
- 我是列表2 25
- 我是列表3 26
- 我是列表4 27
- 我是列表5 28
E:first-child匹配父元素的第一个子元素E。E:last-child匹配父元素的最后一个子元素E。
E:nth-child(n) 匹配父元素的第n个子元素E。
E:target匹配相关URL指向的E元素。这个挺好的，再按了a便签后有一个样式表现，可以知道自己点击了那一页的内容等等。