假设存在如下元素：
<p>who am i</p>
元素选择器：
一个元素用同一种样式：
p {color:green;}
多个元素用同一种样式：
p,h1,h2{color:green;}
所有元素的背景色为黑色：
* {background:black;}
<div>内所有元素的字体颜色为黑色：
div * {color:black;}
属性选择器：
将一个元素加入一个类，只需要增加属性“class”，并提供一个类名。
<p class="greentea"> who am i<p/>
在CSS中编写属性属性选择器，以下代码会造成所有包含“greentea”属性的p元素字体变绿：
p.greentea{ color:green; }
如果希望“greentea”类中所有的元素都有同一种样式：
.greentea{ color:green; }
如果要对所有<blockquote>元素做同样处理，可以这样：
blockquote.greentea , p.greentea {color:green;}
id选择器：
首先对p元素增加一个id:
<p id="footer">who am i</p>
选择id为“footer”的任意元素，id是唯一的：
#footer{color:red;}
选择一个id为“footer”的<p>元素：
P#footer{color:red;}
选择子孙：
选择<div>中的所有子孙<p>元素，<div>是父元素，<p>是子元素，中间有一个空格符。
div p {color:black;}
选择id为“footer”的元素的所有子孙<p>元素，footer为父元素id，<p>是子元素，中间有一个空格符。
#footer p{color:black;}
选择id为“footer”的元素的直接孩子<p>元素：
#footer>p{color:black;}
选择id为“footer”的元素的孩子<p>元素的孩子<blockquote>元素：
#foot p blcokquote{color:blue;}
假设有如下两个属性：greentea和blacktea，blacktea属性所在元素 为 greentea属性所在元素的孩子：
<p class="greentea">who am i,<em class="blacktea">do you know</em></p>
选择有greentea属性的所有元素中 孩子元素带blacktea 属性的 ，并设置颜色为黑色，中间有一个空格：
.greentea .blacktea{color:black;}
伪类：
元素 + 冒号，中间没有空格。
未访问状态的链接：
a:link{color:green;}
已访问的链接：
a:visited{color:red;}
鼠标悬停在链接上：
a:hover{color:yellow;}
焦点在链接上：
a:focus{color:blue;}
活动状态(用户第一次单击链接时)：
a:active{color:black;}
一般的顺序为：link、visited、hover、focus、active。
在id为footer的元素中所有未访问的<a>元素指定颜色为青绿色：
#footer a:link{color:#007e7e;}
