HTML-HTML5+CSS3权威指南阅读（三、CSS选择器）

1.伪元素选择器

　　first-line, first-letter, before, after

2.属性选择器

　　[attr*=val]: 如果元素的 attr 属性中包含用 val 指定的字符的话, 则该元素使用这个样式

　　[attr^=val]: 如果元素的 attr 属性以 val 指定的字符开头的话, 则该元素使用这个样式

　　[attr$=val]: 如果元素的 attr 属性以 val 指定的字符结尾的话, 则该元素使用这个样式

　　[attr~=val]: 如果你想根据属性值中的词列表的某个词来进行选择元素, 那么就需要使用这种属性选择器, 多个词用空格分隔

/*表示所有 div 元素中, id 属性包含 "sel" 字符串的 div 元素*/

div[id*=sel] {

    background-color: yellow;

}

/*表示所有 a 元素中, href 属性以 "/" 结尾的 a 元素*/

a[href$=\/]

3.伪类选择器

　　1), 动态伪类

　　link, visited, hover, active, focus(顺序必须如下: link--visited--hover--active)

.demo a:link {color:gray;}/*链接没有被访问时前景色为红色*/

.demo a:visited{color:yellow;}/*链接被访问过后前景色为黄色*/

.demo a:hover{color:green;}/*鼠标悬浮在链接上时前景色为绿色*/

.demo a:active{color:blue;}/*鼠标点中激活链接那一下前景色为蓝色*/

.demo input:focus{background-color:red;}/*光标焦点为此元素时背景色为蓝色*/

　　2), UI 元素状态伪类

　　enabled, disabled, checked, default(打开页面时默认处于选择状态的单选或复选框), indeterminate(打开页面时一组单选或复选框都处于未选中状态)(IE6, 7, 8不支持)

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

　　3), 结构性伪类选择器

　　root, not, empty, target

　　:root 将样式绑定到页面的根元素中, 在 HTML 页面中即<html>

<!DOCTYPE html>

<html xmlns="http：//www.w3.org/1999/xhtml">

    <head>

        <meta charset="UTF-8" />

        <title>root选择器</title>

        <style>

            :root {background-color: yellow;}

            body {background-color: limegreen;}

        </style>

    </head>

    <body>

        <h1>选择器概述</h1>

        <p>选择器是CSS3中一个重要的内容。首先需要说明的是，使用选择器的目的是为了提高开发人员书写或修改样式表时的工作效率，因为在样式表中，一般会书写大量的代码，在大型网站中，样式表中的代码可能会达到几千行。</p>

    </body>

</html>

　　:not 对某个结构元素使用样式, 但是想排除这个结构元素中的某个元素

<style type="text/css">

    /* body下的所有元素背景色为红色, 但是排除 h1 元素 */

    body *:not(h1) {

        background-color: red;

    }

</style>

　　:empty 匹配所有不包含子元素或者文本的空元素

　　:target 当浏览器地址里的hash(地址里#号后面的部分)和 :target 伪选择器指定的ID匹配上时, 它的样式就会在这个ID元素上生效

　　4), nth 选择器

:first-child选择某个元素的第一个子元素
    :last-child选择某个元素的最后一个子元素
    :nth-child()选择某个元素的一个或多个特定的子元素
    :nth-last-child()选择某个元素的一个或多个特定的子元素, 从这个元素的最后一个子元素开始算
    :nth-of-type()选择指定的元素
    :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算
    :first-of-type选择一个上级元素下的第一个同类子元素
    :last-of-type选择一个上级元素的最后一个同类子元素
    :only-child选择的元素是它的父元素的唯一一个子元素
    :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素
    :empty选择的元素里面没有任何内容

:nth-child(length);/*参数是具体数字*/

:nth-child(n);/*参数是n, 不能是其他字符, n从0开始计算*/

:nth-child(n*length)/*n的倍数选择，n从0开始算*/

:nth-child(n+length);/*选择大于length后面的元素*/

:nth-child(-n+length)/*选择小于length前面的元素*/

:nth-child(n*length+1);/*表示隔几选一*/

:nth-child(odd);/*选择位数为奇数的元素*/

:nth-child(even);/*选择位数为偶数的元素*/

下面我们针对上面所列的各种选择器，一个一个来介绍：

1、:first-child

:first-child是用来选择某个元素的第一个子元素，比如我们这里的这个demo，你想让列表中的"1"具有与从不同的样式，我们就可以使用:first-child来实现：

.demo li:first-child {background: green; border: 1px dotted blue;}

在没有这个选择器出现之前，我们都需在要第一个li上加上一个不同的class名，比如说“first”，然后在给他应用不同的样式

.demo li.first {background: green; border: 1px dotted blue;}

其实这两种最终效果是一样的，只是后面这种，我们需要在html增加一个额外的class名，请看效果：

IE6不支持:first-child选择器。

2、:last-child

:last-child选择器与:first-child选择器的作用类似，不同的是":last-child"选择是的元素的最后一个子元素。比如说，我们需要单独给列表最后一项一个不同的样式，我们就可以使用这个选择器，如：

.demo li:last-child {background: green; border: 2px dotted blue;}

这个效果和以前在列表上的“last”的class是一样的

.demo li.last {background: green; border: 2px dotted blue;}

他们效显示的效果都是一致的，如图所示；

3、:nth-child()

:nth-child()可以选择某个的一个或多个特定的子元素，你可以按这种方式进行选择：

:nth-child(length);/*参数是具体数字*/

:nth-child(n);/*参数是n,n从0开始计算*/

:nth-child(n*length)/*n的倍数选择，n从0开始算*/

:nth-child(n+length);/*选择大于length后面的元素*/

:nth-child(-n+length)/*选择小于length前面的元素*/

:nth-child(n*length+1);/*表示隔几选一*/

:nth-child()可以定义他的值（值可以是整数，也可以是表达式），如上面所示，用来选择特定的子元素，对于这个我们直接看实例，比我说的更好理解。

:nth-child(3),选择某元素下的第三个子元素，（这里的3可以是你自己需要的数字），比如说，我需要选择列表中的第三个li元素，那么我们可以直接这样使用：

.demo li:nth-child(3) {background: lime;}

效果如下所示：

这种不式不能引用负值，也就是说li:nth-child(-3)是不正确的使用方法。

:nth-child(n)，其中n是一个简单的表达式，那么"n"取值是从“0”开始计算的，到什么时候结束我也不知道，如果你在实际应用中直接这样使用的话，将会选中所有子元素，比如说，在我们的demo中，你在li中使用":nth-child(n)",那么将选中所有的"li",如：

.demo li:nth-child(n) {background: lime;}

等于

.demo li {background: lime;}

他其实是这样计算的

			n=0 －－》 没有选择元素

			n=1 －－》 选择第一个li,

			n=2 －－》 选择第二个li,后在的依此类推，这样下来就选中了所有的li

请看效果：

请注意了，这里的“n”只能是"n"，不能使用其他字母代替，不然会没有任何效果的。

:nth-child(2n),这中方式是前一种的变身，我们可以选择n的2倍数，当然其中“2”可以换成你自己需要的数字，如：

.demo li:nth-child(2n) {background: lime;}

等于

.demo li:nth-child(even) {background: lime;}

我们来看一下其计算的过程：

			n=0 －－》 2n=0 －－》 没有选中任何元素，

			n=1 －－》 2n=2 －－》 选择了第二个li

			n=2 －－》 2n＝4 －－》 选择了第四个li，后面的依此类推

如果是“2n”这样跟我们以使用"even"命名class定义样式，所起到的效果是一样的，如图所示：

“:nth-child(2n)”也等于":nth-child(even)"效果。

:nth-child(2n-1),这个选择器是在":nth-child(2n)"基础上演变过来的，上面说了人是选择偶数，那么我们在他的基础上减去“1”就变成奇数选择，如：

.demo li:nth-child(2n-1) {background: lime;}

我们来看看其实现过程

			n=0 －－》 2n-1=-1 －－》 也没有选中任何元素，

			n=1 －－》 2n-1=1 －－》 选择第一个li

			n=2 －－》 2n-1=3 －－》 选择第三个li,后面的依此类推

其实实现这种奇数效果，我们还可以使用":nth-child(2n+1)"和":nth-child(odd)",一起来看他们的效果

:nth-child(n+5)这个选择器是选择从第五个元素开始选择，这里的数字你可以自己定义，如：

.demo li:nth-child(n+5) {background: lime;}

按前面的计算方法，我们来看看，

			n=0 －－》 n+5=5 －－》  选中第5个li

			n=1 －－》 n+5=6 －－》  选择第6个li，后面的就不列出来了，原理一样

你可以使用这种方法选择你需要开始选择的元素位置，也就是说换了数字，起始位置就变了，看下在的效果图：

:nth-child(-n+5)这种选择器刚好和上面的选择器相反，这个是选择第5个前面的，如：

.demo li:nth-child(-n+5) {background: lime;}

如果不清楚怎么一回事，你只要计算一下就明白了

			n=0 －－》 -n+5=5 －－》 选择了第5个li

			n=1 －－》 -n+5=4 －－》 选择了第4个li

			n=2 －－》 -n+5=3 －－》 选择了第3个li

			n=3 －－》 -n+5=2 －－》 选择了第2个li

			n=4 －－》 -n+5=1 －－》 选择了第1个li

			n=5 －－》 -n+5=0 －－》 没有选择任何元素

从上面的计算方法中，大家很清楚的知道是怎么得来的，最后我们一起看看效果吧：

:nth-child(4n+1)这种方法是实现隔几选一的效果，比如我们这里是隔三选一，如果你把"4"换成别的数字那就是另外的一种隔法了，比如这个实例

.demo li:nth-child(4n+1) {background: lime;}

我们主要来看其计算出来的结果

			n=0 －－》4n+1=1 －－》选择了第一个li

			n=1 －－》4n+1=5 －－》选择了第五个li

			n=2 －－》4n+1=9 －－》选择了第九个li

效果如下

IE6-8和FF3-浏览器不支持":nth-child"选择器。

4、:nth-last-child()

":nth-last-child()"选择器和前面的":nth-child()"很相似，只是这里多了一个last，所以他起的作用就和前面的":nth-child"不一样了，他只要是从最后一个元素开始算，来选择特定元素。我们来看几个实例：

.demo li:nth-last-child(4) {background: lime;}

上面代码表示选择倒数第四个列表项，效果如下：

其中":nth-last-child(1)"和":last-child"所起作用是一样的，都表示的是选择最后一个元素。

另外":nth-last-child()"也可以像“:nth-child()”一样，可以使用表达式来选择特定元素，下面我们来看几个特殊的表达式所起的作用

:nth-last-child(2n),这个表示的是从元素后面计算，选择的是偶数个数，从而反过来说就是选择元素的奇数，和前面的":nth-child(2n+1)",":nth-child(2n-1)",":nth-child(odd)"所起的作用是一样的。如：

.demo li:nth-last-child(2n) {background: lime;}

.demo li:nth-last-child(even) {background: lime;}

等于

.demo li:nth-child(2n+1) {background: lime;}

.demo li:nth-child(2n-1) {background: lime;}

.demo li:nth-child(odd) {background: lime;}

请看效果：

:nth-last-child(2n-1)这个选择器刚好跟上面的相反，从后面计算选择的是奇数，而从前面计算选择的就是偶数位了，这个前面的":nth-child(2n)"之类是相同的效果，如：

.demo li:nth-last-child(2n+1) {background: lime;}

.demo li:nth-last-child(2n-1) {background: lime;}

.demo li:nth-last-child(odd) {background: lime;}

等于：

.demo li:nth-child(2n) {background: lime;}

.demo li:nth-child(even) {background: lime;}

效果如下

看了这几个实例，大家都知道":nth-last-child()"和"nth-child()"使用方法是一样的，只不过他们的区别是“:nth-child()”是从元素的第一个开始计算，而“:nth-last-child()”是从元素的最后一个开始计算，他们的计算方法都是一样的。同样在IE6-8和FF3.0-浏览器不支持“:nth-last-child()”选择器。

5、:nth-of-type

:nth-of-type类似于:nth-child，不同的是他只计算选择器中指定的那个元素,其实我们前面的实例都是指定了具体的元素，这个选择器主要对用来定位元素中包含了好多不同类型的元素是很有用处，比如说，我们div.demo下有好多p元素，li元素，img元素等，但我只需要选择p 元素，并让他每隔一个p元素就有不同的样式，那我们就可以简单的写成：

.demo p:nth-of-type(even) {background-color: lime;}

其实这种使用和:nth-child使用是一样的，也可以使用:nth-child的那些表达式和使用方法，唯一不同的是这种指定了元素的类型而以。同样在IE6-8和FF3.0-浏览器不支持这种选择器

6、:nth-last-of-type

这个选择器不用说大家都能想得到了，他和前面的:nth-last-child一样使用，只是他指一了元素的类型而以。

同样在IE6-8和FF3.0-浏览器不支持这种选择器

7、:first-of-type和:last-of-type

:first-of-type和:last-of-type这两个选择器就类似于:first-child和:last-child;不同之处就是指定了元素的类型。

:nth-of-type,:nth-last-of-type;:first-of- type和:last-of-type实际意义并不是很大，我们前面讲的:nth-child之类选择器就能达到这此功能，不过大家要是感兴趣还是可以了解一下，个人认为实用价值并不是很大。此类说法仅供参考。

8、:only-child和:only-of-type

":only-child"表示的是一个元素是它的父元素的唯一一个子元素。我们一起来看一个实例更好理解

<div class="post">

    <p>Lorem ipsum dolor sit amet, consectetur</p>

    <p>Lorem ipsum dolor sit amet, consectetur</p>

</div>

<div class="post">

    <p>Lorem ipsum dolor sit amet, consectetur</p>

</div>

css样式

.demo .post p {background: lime;}

初步效果

如果我需要在div.post只有一个p元素的时候，改变这个p的样式，那么我们现在就可以使用:only-child,如：

.demo .post p {background: lime;}

.demo .post p:only-child {background: red;}

此时只有div.post只有一个子元素p时，那么他的背景色将会改变,如图所示：

:only-of-type是表示一个元素他有很多个子元素，而其中只有一个子元素是唯一的，那么我们使用这种选择方法就可以选择中这个唯一的子元素，比如说

<div class="post">

    <div>Lorem ipsum dolor sit amet, consectetur</div>

    <p>Lorem ipsum dolor sit amet, consectetur</p>

    <div>Lorem ipsum dolor sit amet, consectetur</div>

</div>

如果我们想只选择中上面中的p元素，我们就可以这样写，

p:only-of-type{background-color:red;}

IE6-8浏览器不支持:only-child选择器；IE6-8和FF3.0-浏览器不支持:only-of-type选择器。

9、:empty

:empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格，比如说，你有三个段落，其中一个段落什么都没有，完全是空的，你想这个p不显示，那你就可这样来写：

p:empty {display: none;}

IE6-8浏览器不支持:empty选择器

三、否定选择器（:not）

否定选择器和jq中的:not选择器一模一样，就拿form中的元素来说明这个选择器的用法，比如你想对form中所有input加边框，但又不想submit也起变化，此时就可以使用:not为实现

input:not([type="submit"]) {border: 1px solid red;}

否定选择器 :not()，可以让你定位不匹配该选择器的元素。IE6-8浏览器不支持:not()选择器

四、伪元素

CSS中的伪元素大家以前看过：:first-line,:first-letter,:before,:after;那么在CSS3中，他对伪元素进行了一定的调整，在以前的基础上增加了一个“：”也就是现在变成了“::first-letter,::first- line,::before,::after”另外他还增加了一个“::selection”,两个“：：”和一个“：”css3中主要用来区分伪类和伪元素，到目前来说，这两种方式都是被接受的，也就是说不管使用哪种写法所起的作用都是一样的，只是一个书写格式不同而以。

那么我们简单了解一下他们的作用

::first-line选择元素的第一行，比如说改变每个段落的第一行文本的样式，我们就可以使用这个

p::first-line {font-weight:bold;}

::first-letter选择文本块的第一个字母，除非在同一行里面包含一些其它元素，不过这个主要运用于段落排版上多，比如说首字下沉，

p::first-letter {font-size: 56px;float:left;margin-right:3px;}

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常用"content"配合使用，见过最多的就是清除浮动，

.clearfix:before,

.clearfix:after {

     content: ".";

     display: block;

     height:;

     visibility: hidden;

  }

 .clearfix:after {clear: both;}

 .clearfix {zoom:;}

当然可以利用他们制作出其他更好的效果，比如本站首面的那个三角纸张效果，也是通过这个来实现的。

::selection用来改变浏览网页选中文的默认效果，有关于“::selection”使用，大家可以点击《CSS ::Selection》。

那么有关于CSS3的选择器到这里就全部介绍完了，如果你对这个东西感兴趣，你可以点击这里了解更多的知识。如果你全部看完了这三章关于CSS3选择器的文章你很快能发现，其实有很多选择器和jquery中的选择器是很相似的，新的东西并不多，个人认为最实用的就是:nth-child这些，在特定的环境中所起的作用还是蛮大的，如果你是一位前端的大胆尝试者，你可以尝试这些新的选择器使用方法，这可以让你省去不少的标签，如果你认为还不实用在项目中，但让你学习还是蛮不错的。哈。。。。

转自:http://www.w3cplus.com/css3/pseudo-class-selector