html文档元素就是最基本的选择器
如：
doctype html>html lang=en>head>meta charset=utf-8>title>indextitle>style type=text/css> p {color:blue;}style>head>body> p>这一段话是蓝色的。p>body>html>
示例将
元素的字体颜色设置为了蓝色，元素选择器将作用于文档内所有的
元素。同样，我们也能够同时为多个元素应用一种样式，如：
doctype html>html lang=en>head>meta charset=utf-8>title>indextitle>style type=text/css> h1,p {color:blue;}style>head>body> h1>标题颜色h1> p>这一段话是蓝色的。p>body>html>
为多个元素应用样式时，用逗号分隔。
*作为通配选择器，可以与任何元素匹配。
格式：元素|通配符
二、类选择器
类选择器的样式与元素关联，需要为class属性指定一个适当的值，如：
doctype html>html lang=en>head>meta charset=utf-8>title>indextitle>style type=text/css> .one {color:blue;}style>head>body> p class=one>第一段。p> p>第二段p> p class=one>第三段p>body>html>
格式：.类名
代码中有3个
元素，其中有两个指定了class属性，即class=one，在]开头后面跟上指定的class属性值。类选择器可以对多个且不同元素指定同样的class值。
三、多类选择器
doctype html>html lang=en>head> meta charset=utf-8> title>indextitle> style type=text/css> .one {color:blue;} .two {color:red;} .one.two {color:green;} style>head>body>p class=one two>第一段。p>p class=two>第二段p>p class=one>第三段p>body>html>
效果：
格式：.类名1.类名2……
多类的概念在于可以对class指定多个属性值，如我们为
指定了class=one two，那么这个
元素的class属性就包含了两个属性值one和two，中间空格作为分隔符。在样式表中则使用[.属性值1.属性值2|……]来指向元素。上面的代码中，我们对class值为one的元素颜色应用蓝色，class值含有two的元素应用红色，为class值同时含有one和two的元素颜色应用为绿色。如果在样式表中没有为指定.one.two{color:green;}，那么
第一段。
呈现出来的效果是什么呢？答案是红色。因为.one和.two都会指向满足条件的第一段。
，这时候样式就会依照层叠来应用样式了。四、id选择器
同类选择器类似，但匹配的是id属性，而不是类选择器的class属性。与类选择器不同的是，在一个html文档中，id选择器会使用一次，而且仅一次，虽然在很多浏览器中指定id属性值能够出现多次，但这是不正确的，而且如果在javascript中使用getelementbyid()方法时，会造成不必要的错误。通过#元素id属性值来指向元素。如：
doctype html>html lang=en>head> meta charset=utf-8> title>indextitle> style type=text/css> #p1 {color:blue;} style>head>body>p id=p1>第一段。p>p>第二段p>p>第三段p>body>html>
格式：#id属性值
五、属性选择器
注意：safari、opera和所有基于gecko的浏览器都支持属性选择器，在ie5/mac和ie6/win之前，ie并不支持属性选择器。
1.简单属性选择器
使用情况：如果希望有某个属性的元素，不在乎属性的值是什么。可以使用简单属性选择器。
doctype html>html lang=en>head> meta charset=utf-8> title>indextitle> style type=text/css> p[class] {color:blue;} style>head>body>p class=one>第一段。p>p class=two>第二段p>p>第三段p>body>html>
效果：
格式：元素|通配符[属性]
可以看到含有class属性的
元素的颜色变成了蓝色，并且对class的值并不关注。
还可以根据多个属性进行选择，如：a[href][title]{font-weight:bold;} //对同时具有href属性和title属性的元素变成粗体。
2.根据具体属性值选择
上面的例子是不关注属性值的选择器，那么现在我们要讲的就是需要关注属性值的选择器了。我们将上面的例子改变一下：
doctype html>html lang=en>head> meta charset=utf-8> title>indextitle> style type=text/css> p[class=one] {color:blue;} style>head>body>h1 class=one>123h1>p class=one>第一段。p>p class=two>第二段p>p>第三段p>body>html>
效果：
格式：元素|通配符[属性=属性值]
我们可以看到p[class=one]等同于p.one，但是使用属性选择器可以针对其它属性值来选择元素，而不单单是达到类选择器的效果。
3.根据部分属性值选择
如果属性能接受词列表(词之间用空格分隔)，可以根据其中任意一个词进行选择，如：
doctype html>html lang=en>head> meta charset=utf-8> title>indextitle> style type=text/css> h1[class~=box]{color:blue;} style>head>body>h1 class=one two box>123h1>body>html>
效果：
格式：元素|通配符[属性~=属性部分值]
更高级的css选择器（css2）:
[foo^=bar] 选择foo属性值以bar开头的所有元素
[foo$=bar] 选择foo属性值以bar结尾的所有元素
[foo*=bar] 选择foo属性值中包含字串bar的所有元素
4.特定属性选择类型
doctype html>html lang=en>head> meta charset=utf-8> title>indextitle> style type=text/css> p[lang|=en]{color:blue;} style>head>body>p lang=en>段落1p>p lang=en-a>段落2p>p lang=en-b>段落3p>p lang=cn-en>段落3p>p lang=encn>段落4p>body>html>
这个规则会匹配lang属性等于en或者以en-开头的所有元素，encn也不会起作用，因为不是en-开头，效果：
格式：元素|通配符[属性|=属性值
六、后代选择器
h1 em{color:blue;}
可以看作对作为h1后代元素的em元素颜色改为蓝色，用代码展示就是：
h1>em>123em>h1>
需要注意的是,这里是后代元素，而不只是子元素，如下面的代码也是有效的：
h1>b>em>123em>b>h1>
如果只想缩小范围，选择子元素而不是后代元素，则可以使用下面的方式：
h1 > em{color:blue;}
选择相邻兄弟元素，如：
doctype html>html lang=en>head> meta charset=utf-8> title>indextitle> style type=text/css> h1+p{color:blue;} style>head>body>p>段落1p>h1>段落2h1>p>段落3p>p>段落3p>p>段落4p>body>html>
效果：
通过h1+p匹配了之前的兄弟元素是
的所有符合要求的元素，如果
元素之前元素隔着其它元素，则不符合匹配要求，但中间只隔着文本内容并不会影响匹配。
接下来我们要讲的就是更有意思伪类和伪元素了。
伪类
1.链接伪类
：link 指示作为超链接（即有一个href属性）并指向一个未访问地址的所有锚。有些链接会不正确的解释
：visited 指示作为已访问地址超链接的所有锚
例子：
doctype html>html lang=en>head> meta charset=utf-8> title>indextitle> style type=text/css> a:link {color:blue;} a:visited{color:red;} style>head>body>a href=#1>被点击过了了a>a href=#2>未被点击a>body>html>
结果：
链接伪类也适用于id选择器,如：
a#one:link{color:yellow;}
2.动态伪类
:focus 当前拥有输入焦点的元素
:hover 指示鼠标停留元素
:active 指示被用户输入激活的元素
例子：
doctype html>html lang=en>head> meta charset=utf-8> title>indextitle> style type=text/css> input:focus{background-color:black;} a:hover {background-color:yellow;} a:active{background-color:red;} style>head>body>input type=text>a href=#6>例子a>body>html>
无操作效果：
文本框获得焦点效果：
鼠标在文字上停留效果：
鼠标在文字上按下左键时效果：
伪元素
1.设置首字母样式
如将
元素中第一个字母变成红色:
p:first-letter{color:red;}
效果：
2.设置第一行的样式
如：
p:first-line{color:red;}
效果：
3.设置之前和之后元素的样式
如：
h2:before{content:;}h2:after{content:>>;color:red;}
效果：