CSS选择器整理

1、 常用选择器

a) 元素选择器（简单选择器/类型选择器）：匹配特定标签的元素，格式为 标签 { …样式…}，例如：

        p{color:red;}
        h1{font-weight:bold;}

b) 后代选择器：匹配特定元素或者元素组的后代，格式为 标签 后代{ …样式…}，例如：

        div p{color:red:}
        ul li{float:left;}

c) ID选择器：匹配特定ID的元素，格式为 #ID{ …样式…}，例如:

        #information{font-size：14px;}
        #blog{color:#000000;}

d) 类选择器：匹配特定class的所有元素，格式为 .class{ …样式…}，例如：

        .last{background:#dddddd;}
        .infor{float:left;}

e) 选择器分组：多个元素共享同一个样式，元素与元素之间用“,”隔开，格式为 标签，标签{…样式…}例如：

        p, h2{color:#ffffff; background:#970914;}

元素选择器和后代选择器适合应用于那些应用范围广的一般性样式，想要匹配更特定的元素，可以使用ID选择器和类选择，在实际的项目应用中结合使用元素、后代、ID和类这几种选择比较常见。我们在使用ID选择器的时候建议直接使用“#ID”而不是“div#ID”,因为后面的写法是先查找所有的div，然后匹配相应ID的，读取速度没有前者快，而且ID在整个文档中是唯一的，不必担心匹配到多个。

2、 伪类选择器：
有时候我们需要根据文档结构之外的其他条件对元素应用样式，例如表单元素或者链接的状态，这要使用伪类选择器来完成：

a) :link，:visited，:active，:hover 与链接相关的伪类，它们的顺序为link->visited->hover->active,避免出现hover的样式读取不到的问题（鼠标经过未访问的链接时，同时拥有link 和hover两个属性，css采取就近原则，优先满足最近的link样式，而放弃hover样式）。

:link和:visited只能应用于锚元素，:hover,:active和:focus理论上可以应用于任何元素。:hover在IE7+中可以应用于任何对象，在IE5/6中，仅能应用于a对象，而且该对象必须要有href属性，想要在ie5/6下应用，可以在标签外添加一个a标签，并且设置a:hover{…样式…}，然后再写a标签内的元素样式。:active和:focus则被忽略。

b) :first-child匹配父元素的第一个子元素，格式为 标签:first-child{ …样式…}，例如

        p:first-child{color:#ffffff;} //设置属于其父元素的第1个子元素的每个P的背景色

c) ：lang(a)匹配lang属性为a的元素，格式为 标签：lang(a){…样式…}，例如:

        p:lang(en){background:yellow;}

3、 通用选择器：

a) 通用选择器可能是所有选择器中最强大却最少使用的，它匹配所有可用元素，格式为 *{…样式…}，例如：

        *{margin:0;padding:0;}

4、 高级选择器：

a) 子选择器：子选择器只选择元素的直接后代（而后代选择器选择一个元素的所有后代），即子元素，格式为 父标签>子标签{…样式…}，例如：

        h1 > strong {color:red;}  //h1的子元素strong字体颜色为红色

b) 相邻兄弟选择器：选择紧接在另一个元素后的匹配元素，而且二者有相同的父元素，格式为 标签+标签{…样式…}，例如：

        p + p{margin-top:10px;} //紧跟p元素之后的p元素

c) 同级兄弟选择器：选择紧接在另一个元素后的所有匹配元素，二者有相同的父元素，格式为 标签~标签{…样式…}，例如：

        p~ul{background:#dddddd;} //p元素自后所有的同级ul元素

d) 属性选择器：根据元素的属性来匹配，其属性可以是标准属性，也可以是自定义属性，格式为 标签[attr]{…样式…},例如：

        [title]   //选择有title属性的所有元素
        [attr = val] //选择属性为val的所有元素  [title = “gif”]
        [attr ^= val]  //选择属性以val开头的所有元素  [title ^= “jian”]
        [attr $= val]  //选择属性以val结束的所有元素  [title $= “.png”]
        [attr *= val]  //选择属性中包含val的所有元素  [title *= “gif”]
        [attr ~=val ]  //选择属性中包含一个以空格分割的词为val的所有元,即属性中必须有这个词，而且这个词要与其他词之间有空格分割  [title~=”flow”]
        [attr|=val]  //匹配属性为val或者以val-开头的所有元素  [lang|=”en”]

e) 伪元素选择器：所有的伪元素选择器都必须放在出现该伪元素的选择器的最后边，也就是说伪元素选择器不能跟任何派生选择器（p:after span这个是不合法的），格式为 标签:伪元素{…样式…},例如：

        :first-letter  //设置选择标签的首字母  
        p:first-letter{color:#eeeeee;}
        :first-line  //设置选择标签的首行  
        p:first-line{color:#eeeeee;}

能够与:first-letter和:first-line一起使用的属性有:
a) 字体
b) 字体颜色
c) 背景属性
d) 外边距属性
e) 内边距属性
f) 边框属性
g) Text-decoration
h) Vertical-align
i) Text-transform
j) Line-height
k) Float
l) clear

:before //设置选择标签的内容前面插入内容，通过设置content属性来指定要插入的内容，例如：

            p:before {content:”段落”; color:red;}// 在段落之前插入红色字体的“段落”

    :after  //设置选择标签的内容之后插入内容，通过设置content属性来指定要插入的内容，例如：

            p:after{content:”段落”; color:red;}// 在段落之后插入红色字体的“段落”

f) 结构性伪类选择器：结构性伪类选择器的冒号前面可以不添加任何标签做限定，也可以添加标签做选择。

i. :root 选择文档根元素，对于HTML文档，就是HTML元素

            :root{background:red;}

ii. :empty 选择没有任何内容（包括空格和文本）的匹配元素（）

            p:empty{background:red}

iii.:not(s) 选择不符合当前选择器的任何元素

            :not(p) //所有不是p元素的元素

iv. :nth-child(n) 选择属于父元素的第n个子元素，n可以是数字、关键字或公式

            p:nth-child(2){background:red} //设置父元素的第二个子元素且为p标签的背景色，当为1的时候相当于:firsr-child

v. :nth-of-type(n) 选择属于父元素的第n个标签元素，n可以是数字、关键字或公式

            p: nth-of-type(2){background:red} //设置父元素中的第二个p元素的背景色

    vi. :nth-last-child(n) 选择属于父元素的倒数第n个子元素，n可以是数字、关键字或公式

            p:nth-last-child(2){background:red} //设置父元素的倒数第二个子元素且为p标签的背景色，当为1的时候相当于:firsr-child

    vii. :nth-last-of-type(n) 选择属于父元素的倒数第n个标签元素，n可以是数字、关键字或公式

    p: nth-last-of-type(2){background:red} //设置父元素中的倒数第二个p元素的背景色

nth-child和nth-of-type的不同之处是前者是父元素的第几个子元素而且这个子元素匹配相应的标签才会生效，而后者是父元素中的第几个相匹配的子元素，不计算其他不符合的元素，nth-last-child、nth-last-of-child是与nth-child、nth-of-type相对应的倒叙设置方法。

:last-child选择属于父元素的最后一个子元素，等同于:nth-last-child(1)

:first-of-type 选择属于父元素的第1个子元素，等同于:nth-of-type(1)

:last-of-type 选择属于父元素的第1个子元素，等同于:nth-last-of-type(1)

:target 选择文档中当前活动的目标元素（URL带有后面根由锚名称#，指向文档内某个具体的元素，这个被链接的元素就是目标元素-targetelement。）

g) UI元素伪类选择器：

i. :enabled 选择表单中处于激活状态的元素

        input:enabled{background:#ffff00;}  //设置处于激活状态的元素背景色

ii. :disabled 选择表单中处于禁用状态的元素 （与enabled相反）

iii.:checked 选择表单中被选中的radio或checkbox元素（现在只有Opera支持）

iv. ::selection (::-moz-selection火狐中) 选择用户鼠标选取的部分，目前能够应用的属性为：color，background，cursor以及outline