属性选择器
目前使用的并不多。新浪和京东有使用。
可以根据元素的属性即属性值来选择元素。
单个属性时的语法：*[属性名称]{样式}
例如：（表示所有有href属性的标签）
1 <style type="text/css">
2 *[href]{
3 color:red;
4 }
5 </style>
1 <style type="text/css">
2 span[href]{
3 color:red;
4 }
5 </style>
上面的代码中表示span标签中具有href属性的元素，给它的内容的颜色设置为红色。span中的href属性并没有实际意义。
多个属性时的语法：*[属性名称][属性名称]{样式}
例如：（表示类名为a的具有href和name属性的元素）
1 <style type="text/css">
2 .a[href][name]{
3 color:red;
4 }
5 </style>
根据属性值匹配，要求完全匹配时的语法：*[属性名称="属性值"]{样式}
例如：
1 <style type="text/css">
2 input[type="text"]{
3 color:red;
4 }
5 </style>
上述的示例可以将文本框输入的字体颜色变为红色。
根据属性值的单词匹配的语法：*[属性名称~="单词"]{样式}
例如：（表示div中类名中包含单词“note”的元素，“war note”匹配，“warnote”不匹配）
1 <style type="text/css">
2 div[class~="note"]{
3 color:red;
4 }
5 </style>
根据属性值包含的内容匹配的语法：*[属性名称*="内容"]{样式}
例如：（表示div中类名中包含单词“note”的元素，“warnote”和“war note”都是匹配的）
1 <style type="text/css">
2 div[class*="note"]{
3 color:red;
4 }
5 </style>
如果~=和*=同事存在，heml解析的顺序（与优先级相反）是怎样的呢？
与它们出现在html中的位置有关，出现在前面的先执行，出现在后面的后执行，后面执行的属性值会覆盖前面执行的属性值，也就是说后执行的优先级高。
以属性值开头的内容选择的语法：*[属性名称^="内容"]{样式}
例如：（以“btn”开头的name属性值对应的元素被选中）
1 <style type="text/css">
2 div[name^="btn"]{
3 color:red;
4 }
5 </style>
以属性值开头的单词的选择的语法：*[属性名称|="单词"]{样式}
例如：（input标签中以“btn”单词开头的name属性值对应的元素被选中）
1 <style type="text/css">
2 input[name|="btn"]{
3 color:red;
4 }
5 </style>
以属性值结尾的内容的选择的语法：*[属性名称$="内容"]{样式}
例如：（button标签中的name属性值以“btn”结尾的标签被选中）
1 <style type="text/css">
2 input[type="button"][name$="btn"]{
3 color:red;
4 }
5 </style>
交集选择器（ID选择器的一种）
由两个选择器组合而成，第一个是标签选择器，第二个是类选择器或者ID选择器，用于更加明确的选择某个元素。
语法：标签.class（或者标签#id）{样式}（注意：第一个必须是标签选择器，中间不能有空格）。
html执行各类选择器的顺序（与优先级相反）：
浏览器默认的样式
标签选择器
类选择器
交集选择器（标签.class）
id选择器
交集选择器（标签.id）
行内样式
使用频率并不高。
分组选择器
由多个选择器通过逗号连接在一起，也称之为并集选择器。
例如：body,div,dl,dt,dd,ul{margin:0;padding:0}（通常使用这类代码初始化CSS去掉页面的内边距和外边距）。
具体使用可查看新浪网的源码。
考虑到网页加载的速度和流量，通常会对CSS样式文件和JS脚本文件做压缩处理（即去掉多余的空格等）。
伪类样式选择器
超链接有很多的行为，比如：鼠标悬浮在上面，鼠标点击（点击后会发现超链接样式与其他的不同），鼠标离开后的样式，都可以通过伪类样式来实现。
CSS3.0中增加了许多伪类选择器。主要介绍CSS1.0和CSS2.0中的伪类选择器。
E:link 设置超链接a在未被访问前的样式，用在<a>标签中。（E表示选择器：类选择器、ID选择器、标签选择器，但是不能是元素选择器）
语法：E:link{样式}
例如：注释掉的代码段与该伪类选择器看似实现同样的功能，实际上是不同的。使用伪类选择器的样式只作用于超链接，也就是说如果<a>标签没有设置href的属性值，那么它就会呈现出默认样式而不会被设置为橘色。如果使用的是注释掉的代码（标签选择器），则所有的<a>标签不管是不是超链接，它们都会变成橘色。
E:visited 设置超链接a在其链接地址被访问以后的样式。
语法：E:visited{样式}
E:hover 设置元素在其鼠标悬停的样式。
语法：E:hover{样式}
E:focus 设置对象在成为输入焦点（该对象的focus事件发生）时的样式。webkit（Google浏览器）内核浏览器会默认给:focus状态的元素加上outline（外边的线条）的样式。
语法：E:focus{样式}
E:first-child 应用该样式的第一个元素，而不是子元素。（也就是说html解析中第一个被用到的E标签，而不是指E标签中的第一个子元素）
语法：E:first-child{样式}
例如：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>伪类样式选择器</title>
6 <meta charset="utf-8" />
7 <style type="text/css">
8 a:link {
9 color: orange;
10 }
11 /*a {
12 color: orange;
13 }*/
14 a:visited {
15 color:gray;
16 }
17 a:hover {
18 color:red;
19 text-decoration:none;
20 }
21 input:focus {
22 /*实线边框，2px，红色*/
23 border:2px solid red;
24 /*谷歌浏览器默认加上外边框了，需要我们自己去掉外边框*/
25 outline:none;
26 }
27 /*是指第一个被使用的div标签，而不是指div标签的第一个子元素*/
28 div:first-child {
29 border:2px solid red;
30 }
31 </style>
32 </head>
33 <body>
34 <div>
35 <p>第一段</p>
36 <p>第二段</p>
37 <p>第三段</p>
38 </div>
39 <div>
40 <input/>
41 <span>第一个<span>标签</span>
42 <ul>
43 <li>
44 <a href="http://www.baidu.com" title="百度">百度</a>
45 <span>搜索网站</span>
46 </li>
47 <li>
48 <a href="http://www.baidu.com" title="新浪">新浪</a>
49 <span>门户网站</span>
50 </li>
51 <li>
52 <a href="http://www.baidu.com" title="网易">网易</a>
53 <span>门户网站</span>
54 </li>
55 </ul>
56 <span>第二个<span>标签</span>
57 <p>段落标签</p>
58 </div>
59 </body>
60 </html>
注意：伪类选择器中不能有空格
练习
1分组选择器
2属性选择器
3类选择器
4后代选择器
5分组选择器（后代选择器）
6分组选择器（后代选择器，伪类选择器）
7分组选择器
8子元素选择器（前面是一个后代选择器）
9伪类选择器（前面是后代选择器）
10后代选择器