CSS选择器
------->CSS选择器优先级
1>通配符选择器（CSS2）
选择所有元素,所有浏览器都支持。
*｛
margin:0;
padding:o;
｝
2>元素选择器（CSS1）
p{ color:pink; }
选择所有 <p> 元素。
3>类选择器（CSS1）
选择 class="className" 的所有元素。
所有浏览器都支持类选择器，但多类选择武器（.className1 .className2)不被IE6支持。
.className{ background-color:#dadada; }
4>id选择器（CSS1）
选择 id="id" 的所有元素。
所有浏览器都支持ID选择器。
#id｛
background-color:#dadada;
｝
——>id 和 class 的区别
id是唯一标识符，也就是说同一个id名在一个html文件中只能出现一次，而class可以有很多个引用。在js中可以通过id来获取元素getElementById("id")，所以一般情况下需要通过js原生获取元素时才用到id，设置样式通常都用class，js原生不能直接通过class获取元素。
5>后代选择器/包含选择器（CSS1）
所有主流浏览器都支持 element element 选择器。
div p { background-color:yellow; //选择并设置位于 <div> 元素内部的每个 <p> 元素的样式; }
6>子元素选择器(CSS2)
所有主流浏览器都支持 element>element 选择器。
element>element 选择器用于选取带有特定父元素的元素。
对于 IE8 及更早版本的浏览器中的 element>element，必须声明 <!DOCTYPE>。
如果元素不是父元素的直接子元素，则不会被选择。
div>p { background-color:yellow; //选取父元素是 <div> 元素的每个 <p> 元素，并设置其背景色： }
7>相邻兄弟选择器（CSS2）
所有主流浏览器都支持 element+element 选择器。
对于 IE8 及更早版本的浏览器中的 element+element，必须声明 <!DOCTYPE>。
相邻兄弟选择器，该选择器定位与元素E具有相同父元素且在标记中紧邻（不是内部）element的元素element。
div+p { background-color:yellow; //选择 <div> 元素之后紧跟的每个 <p> 元素 }
8>一般兄弟选择器(CSS3)
element1~element2 选择器 element1 之后出现的所有 element2。(两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。)
所有主流浏览器都支持 element1~element2 选择器。
对于 IE8 中的该选择器，必须声明 <!DOCTYPE>。
p~ul { background:#ff0000; //为所有相同的父元素中位于 p 元素之后的所有 ul 元素设置背景 }
9>属性选择器
[attribute]（CSS2）
用于选取带有指定属性的元素。
所有主流浏览器都支持 [attribute] 选择器。
对于 IE8 及更早版本的浏览器中的 [attribute]，必须声明 <!DOCTYPE>。
a[target] { background-color:yellow; //为带有 target 属性的 <a> 元素设置样式 }
[attribute=value]（CSS2）
用于选取带有指定属性和值的元素。
所有主流浏览器都支持 [attribute=value]选择器。
对于 IE8 及更早版本的浏览器中的 [attribute=value]，必须声明 <!DOCTYPE>。
a[target=_blank] { background-color:yellow; //为 target="_blank" 的 <a> 元素设置样式 }
[attribute~=value] (CSS2)
用于选取属性值中包含指定词汇的元素。
所有主流浏览器都支持[attribute~=value]选择器。
对于 IE8 及更早版本的浏览器中的 [attribute~=value]，必须声明 <!DOCTYPE>。
[title~=flower] { background-color:yellow; //选择 titile 属性包含单词 "flower" 的元素，并设置其样式 }
[attribute|=value] (CSS2)
用于选取带有以指定值开头的属性值的元素。
(该值必须是整个单词，比如 lang="en"，或者后面跟着连字符，比如 lang="en-us"。)
所有主流浏览器都支持 [attribute|=value] 选择器。
对于 IE8 及更早版本的浏览器中的 [attribute|=value]，必须声明 <!DOCTYPE>。
[lang|=en] { background-color:yellow; //选择 lang 属性值以 "en" 开头的元素，并设置其样式 }
[attribute^=value](CSS3)
匹配属性值以指定值开头的每个元素。
所有主流浏览器都支持 [attribute^=value] 选择器。
对于 IE8 及更早版本的浏览器中的 [attribute^=value]，必须声明 <!DOCTYPE>。
div[class^="test"] { background:#ffff00; //设置 class 属性值以 "test" 开头的所有 div 元素的背景色 }
[attribute$=value](CSS3)
匹配属性值以指定值结尾的每个元素。
所有主流浏览器都支持 [attribute$=value] 选择器。
对于 IE8 及更早版本中的 [attribute$=value]，必须声明 <!DOCTYPE>。
div[class$="test"] { background:#ffff00; //设置 class 属性值以 "test" 结尾的所有 div 元素的背景色 }
[attribute*=value](CSS3)
匹配属性值包含指定值的每个元素。
所有主流浏览器都支持 [attribute*=value] 选择器。
对于 IE8 及更早版本中的 [attribute*=value]，必须声明 <!DOCTYPE>。
div[class*="test"] { background:#ffff00; //设置 class 属性值包含 "test" 的所有 div 元素的背景色 }
10>伪类选择器
:link（CSS1）：未访问的链接；
:visited（CSS1）：已访问的链接；
:hover（CSS1）：鼠标移动到容器，不仅限于链接，可用于页面中的任何元素；
:active（CSS1）：被激活时的状态，不仅限于链接，可用于任何具有tabindex属性的元素；
:focus（CSS2）：获得焦点时状态，不仅限于链接，可用于任何具有tabindex属性的无线；
<所有主流浏览器都支持>
a:link {color:blue;} a:visited {color:blue;} a:hover {color:red;} a:active {color:yellow;}
:lang(CSS2)
用于选取带有以指定值开头的 lang 属性的元素。
该值必须是整个单词，即可是单独的，比如 lang="en"，也可后跟连接符，比如 lang="en-us"。
所有主流浏览器都支持 :lang 选择器。
对于 IE8 中的 :lang，必须声明 <!DOCTYPE>。
p:lang(en)
{
background:yellow; //选择带有以 "en" 开头的 lang 属性值的每个 <p> 元素，并设置其样式
}
:first-child(CSS2)
用于选取属于其父元素的首个子元素的指定选择器。
所有主流浏览器都支持 :first-child 选择器。
注释：对于 IE8 及更早版本的浏览器中的 :first-child，必须声明 <!DOCTYPE>。
p:first-child i { background:yellow; //选择每个 <p> 中的每个 <i> 元素并设置其样式，其中的 <p> 元素是其父元素的第一个子元素 }
:only-child(CSS3)
匹配属于其父元素的唯一子元素的每个元素
所有主流浏览器均支持 :only-child 选择器，除了 IE8 及更早的版本。
p:only-child { background:#ff0000;//规定属于其父元素的唯一子元素的每个 p 元素 }
:last-child(CSS3)
(等同于 p:nth-last-child(1))
所有主流浏览器均支持 :last-child 选择器，除了 IE8 及更早的版本.
选择器匹配属于其父元素的最后一个子元素的每个元素。
p:last-child { background:#ff0000;//指定属于其父元素的最后一个子元素的 p 元素的背景色 }
:nth-child(n)(CSS3)
匹配属于其父元素的第 N 个子元素，不论元素的类型。n 可以是数字、关键词或公式。
所有主流浏览器均支持 :nth-child() 选择器，除了 IE8 及更早的版本。
:nth-last-child(n)(CSS3)
匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n 可以是数字、关键词或公式。
所有主流浏览器均支持 :nth-last-child() 选择器，除了 IE8 及更早的版本。
//奇偶相间颜色 p:nth-last-child(odd) { background:#ff0000; } p:nth-last-child(even) { background:#0000ff; }
:nth-last-of-type(n)(CSS3)
匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数。
n 可以是数字、关键词或公式。
所有主流浏览器均支持 :nth-last-of-type() 选择器，除了 IE8 及更早的版本。
:nth-of-type(n)(CSS3)
匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。
所有主流浏览器均支持 :nth-of-type() 选择器，除了 IE8 及更早的版本
:first-of-type(CSS3)
（等同于 :nth-of-type(1)）
选择器匹配属于其父元素的特定类型的首个子元素的每个元素。
所有主流浏览器均支持 :first-of-type 选择器，除了 IE8 及更早的版本。
:last-of-type(CSS3)
（等同于 :nth-last-of-type(1)）
选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素。
所有主流浏览器均支持 :first-of-type 选择器，除了 IE8 及更早的版本。
:：selection（CSS3）
IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。
Firefox 支持替代的 ::-moz-selection。
::selection 选择器匹配被用户选取的选取是部分。
只能向 ::selection 选择器应用少量 CSS 属性：color、background、cursor 以及 outline。
::selection
{
color:#ff0000; //使被选中的文本成为红色
}
::-moz-selection
{
color:#ff0000;
}
:target(CSS3)
用于选取当前活动的目标元素.
所有主流浏览器均支持 :target 选择器，除了 IE8 及更早的版本。
p:target { border: 2px solid #D4D4D4; //突出显示活动的 HTML 锚 background-color: #e5eecc; }
:root(CSS3)
匹配文档根元素(在 HTML 中，根元素始终是 html 元素).
所有主流浏览器均支持 :root 选择器，除了 IE8 及更早的版本
:root { background:#ff0000; //设置 HTML 文档的背景色 }
:empty(CSS3)
匹配没有子元素（包括文本节点）的每个元素。
所有主流浏览器均支持 :root 选择器，除了 IE8 及更早的版本。
p:empty { background:#ff0000;//指定空的 p 元素的背景色 }
:enabled(CSS3)
匹配每个已启用的元素（大多用在表单元素上）。
所有主流浏览器均支持 :enabled 选择器，除了 IE8 及更早的版本。
input[type="text"]:enabled { background-color: #ff0000;//为所有 type="text" 的已启用的 input 元素设置背景色 }
:disabled(CSS3)
匹配每个被禁用的元素（大多用在表单元素上）。
所有主流浏览器均支持 :enabled 选择器，除了 IE8 及更早的版本。
input[type="text"]:disabled { background-color: #dddddd;//为所有 type="text" 的被禁用的 input 元素设置背景色 }
:checked(CSS3)
匹配每个已被选中的 input 元素（只用于单选按钮和复选框）。
只有 Opera 支持 :checked 选择器。
input:checked { background-color: #ff0000;//为所有被选中的 input 元素设置背景色 }
:not(selector)(CSS3)
匹配非指定元素/选择器的每个元素.
所有主流浏览器均支持 :target 选择器，除了 IE8 及更早的版本。
:not(p) { background-color: #ff0000;//设置非 <p> 元素的所有元素的背景色 }
11>伪元素
:before(CSS2)
选择器在被选元素的内容前面插入内容。
请使用 content 属性来指定要插入的内容。
所有主流浏览器都支持 :before 选择器。
对于 IE8 及更早版本中的 :before，必须声明 <!DOCTYPE>。
p:before { content:"台词："; //在每个 <p> 元素的内容之前插入新内容 }
:after(CSS2) 选择器在被选元素的内容后面插入内容。
请使用 content 属性来指定要插入的内容。
所有主流浏览器都支持 :after 选择器。
对于 IE8 及更早版本中的 :after，必须声明 <!DOCTYPE>。
p:after { content:"台词："; //在每个 <p> 元素的内容之后插入新内容 }
:first-line（CSS1）
用于选取指定选择器的首行。
所有主流浏览器都支持 。
以下属性可与 :first-line 使用：
字体属性、颜色属性、背景属性、word-spacing、letter-spacing、text-decoration、vertical-align、text-transform、line-height、clear
p:first-line { background-color:yellow; //选择每个 <p> 元素的首行，并为其设置样式 }
:first-letter(CSS1)
用于选取指定选择器的首字母。
以下属性可与 :first-letter 使用：
字体属性、颜色属性、背景属性、外边距属性、内边距属性、边框属性、text-decoration、vertical-align（只有在 float 为 'none' 时）、text-transform、line-height、float、clear
所有主流浏览器都支持。
p:first-letter { font-size:200%; //选择每个 <p> 元素的首字母，并为其设置样式 color:#8A2BE2; }
本文首发于Calamus的博客。
