（转）CSS3选择器

日常项目中，我们每天都在使用CSS的选择器，但是对于一些基本的运用还是有一些不理解或者遗漏，这篇文章就是从CSS选择器开始，深入到CSS3选择器的运用。那么什么是CSS呢？CSS就是一种用于屏幕上渲染html，xml等的一种语言，它主要是在相应的元素中应用样式，来渲染相对应用的元素，那么如何选择对应的元素，就需要选择器，具体可参考http://kimblim.dk/css-tests/selectors/这个网址，里面有详细的介绍。

选择器分为三个部分：1.基本选择器；2.属性选择器；3：伪类选择器
在我们日常的项目中，因为还要兼容IE6，所以基本上使用的是基本选择器，后两类比较少用到，下面一段代码是用于详细解释的一段例子

<div class="demo">
  <ul class="clearfix">
    <li id="first" class="first">1</li>
    <li class="active important">2</li>
    <li class="important items">3</li>
    <li class="important">4</li>
    <li class="items">5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li id="last" class="last">10</li>
  </ul>
</div>基本选择器

我在这里把基本选择器也分为了两类：
一、所以浏览器都支持的选择器

1.通配符选择器(*)
*{margin:0;padding:0;}
.demo * {border:1px solid blue;}

2.元素选择器(E)
li {background-color: grey;color: orange;}

3.类选择器(.className)
所有浏览器都支持类选择器，但多类选择器（.className1.className2）不被ie6支持。例如 .important.items {background:#ccc;} .important.items这个选择器只对元素中同时包含了"important"和"items"两个类才能起作用有一点大家需要注意，如果一个多类选择器包含的类名中其中有一个不存在，那么这个选择器将无法找到相匹配的元素,比如说下面这句代码
.first.last {color: blue;}
他就无法到找相对应的的元素标签，因为我们列表中只有一个li.first和一个li.last，不存在有一个叫li.first.last的列表项：

4.ID选择器
id选择器顾名思义就是利用id对其进行css的设置，如#last {color:red;},很简单，但是有几个地方是需要注意的：
第一：一个文档中一个id选择器只充许使用一次，因为id在页面中是唯一的；
第二，id选择器不能像类选择器一样多个合并使用，一个元素只能命名一个id名；
第三，可以在不同的文档中使用相同的id名，比如说在“test.html”中给h1定了“＃important”,也可以给“test1.html”中定义p的id为"#important"，但前提是不管在test.html还是test1.html中只充许有一个id叫"#important"的存在。

5、后代选择器（Ｅ Ｆ）
.demo li {color: blue;}
前面E为祖先元素，Ｆ为后代元素，所表达的意思就是选择了Ｅ元素的所有后代Ｆ元素，请注意他们之间需要一个空格隔开。这里Ｆ不管是E元素的子元素或者是孙元素或者是更深层次的关系，都将被选中，换句话说，不论Ｆ在Ｅ中有多少层关系，都将被选中

6.群组选择器（selector1,selector2,...,selectorN）
.first, .last {background: green;color: yellow; border: 1px solid #ccc;}
群组选择器是将具有相同样式的元素分组在一起，每个选择器之间使用逗号“，”隔开，如上面所示selector1,selector2,...,selectorN。

二、ie6不支持

1.子元素选择器(E>F)
子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E>F所表示的是选择了Ｅ元素下的所有子元素Ｆ。这和后代选择器（ＥＦ）不一样，在后代选择器中Ｆ是Ｅ的后代元素，而子元素选择器Ｅ > F，其中Ｆ仅仅是Ｅ的子元素而以,如下面的代码所示：表示选择ul下的所有子元素
ul > li {background: green;color: yellow;}

2.相邻兄弟元素选择器(E + F)
相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且Ｆ元素在Ｅ元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择Ｆ元素。如下面的代码所示：表示选择li的相邻元素li，我们这里一共有十个li，那么上面的代码选择了从第2个li到 10 个li，一共九个,上面的li+li其中第二li是第一li的相邻元素，第三个又是第二个相邻元素，因此第三个也被选择，依此类推，所以后面九个li都被选中了
li + li {background: green;color: yellow; border: 1px solid #ccc;}
如果换成以下代码，
.active + li {background: green;color: yellow; border: 1px solid #ccc;}
选择了li.active后面相邻的li元素，注意了和li.active后面相邻的元素仅只有一个

3.通用兄弟选择器（Ｅ ~ Ｆ）
通用兄弟元素选择器是CSS3新增加一种选择器，这种选择器将选择某元素后面的所有兄弟元素，他们也和相邻兄弟元素类似，需要在同一个父元素之中，换句话说，E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择中所有Ｅ元素后面的Ｆ元素。如下代码所示，它选中了active之后的所以li元素
.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}

属性选择器(IE6不支持)

属性选择器是指对带有指定属性的HTML 元素设置样式，它主要包括以下几种：
E[attr]：只使用属性名，但没有确定任何属性值;
E[attr="value"]：指定属性名，并指定了该属性的属性值；
E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“~”不能不写；
E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;
下面我来一个个解释下：

1.E[attr]
E[attr]属性选择器是CSS3属性选择器中最简单的一种。如果你希望选择有某个属性的元素，而不论这个属性值是什么，你就可以使用这个属性选择器,如：
.demo a[id] {background: blue; color:yellow;font-weight:bold;}
上面代码所表示的，选择了div.demo下所有带有id属性的a元素，并在这个元素上使用背景色为兰色，前景色为黄色，字体加粗的样式,也可以使用多属性进行选择元素，如E[attr1][attr2], 这样只要是同时具有这两属性的元素都将被选中
.demo a[href][title] {background: yellow; color:green;}
它表示的是选择div.demo下的同时具有href,title两个属性的a元素，并且应用相对应的样式

2.Ｅ[attr="value"]
E[attr="value"]选择器和E[attr]选择器，从字面上就能很清楚的理解出来，E[attr="value"]是指定了属性值“value”，而E[attr]只是选择了有对应的属性，并没有明确指其对应的属性值"value"，这也是这两种选择器的最大区是之处。从而缩小了选择围，更能精确选择自己需要的元素,如：
.demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}
我们选中的是div.demo中的a元素，并且这个元素有一个"id="first""属性值,E[attr="value"]属性选择器也可以多个属性并写，进一步缩小选择范围
.demo a[href="http://www.w3cplus.com"][title] {background: yellow; color:green;}
对于E[attr="value"]这种属性值选择器有一点需要注意：属性和属性值必须完全匹配，特别是对于属性值是词列表的形式时

3.E[attr~="value"]
如果你想根据属性值中的词列表的某个词来进行选择元素，那么就需要使用这种属性选择器：E[attr~="value"]，这种属性选择器是属性值是一个或多个词列表，如果是列表时，他们需要用空格隔开，只要属性值中有一个value相匹配就可以选中该元素，而我们前面所讲的E[attr="value"]是属性值需要完全匹配才会被选中，他们两者区别就是一个有“~”号，一个没有“~”号,如：
.demo a[title~="website"]{background:orange;color:green;}
div.demo下的a元素的title属性中，只要其属性值中含有"website"这个词就会被选择
.demo a[href="http://www.w3cplus.com"][title] {background: yellow; color:green;}
属性选择器中有波浪（~）时属性值有value时就相匹配，没有波浪（~）时属性值要完全是value时才匹配。

4.E[attr^="value"]
E[attr^="value"]属性选择器，指的是选择attr属性值以“value”开头的所有元素，换句话说，选择的属性其以对应的属性值是以“value”开始的,如：
.demo a[href^="http://"]{background:orange;color:green;}
上面代码表示的是选择了以href属性，并且以"http://"开头的属性值的所有a元素

5.E[attr$="value"]
Ｅ[attr$="value"]属性选择器刚好与E[attr^="value"]选择器相反，E[attr$="value"]表示的是选择attr属性值以"value"结尾的所有元素，换句话说就是选择元素attr属性，并且他的属性值是以value结尾的，这个运用在给你一些特殊的链接加背景图片很方便的,如：
.demo a[href$="png"]{background:orange;color:green;}
上面代码表示的是选择div.demo中元素有href属性，并以png值结尾的a元素

6.E[attr*="value"]
E[attr*="value"]属性选择器表示的是选择attr属性值中包含子串"value"的所有元素。也就是说，只要你所选择的属性，其属性值中有这个"value"值都将被选中,如：
.demo a[title*="site"]{background:black;color:white;}
上面代码表示的是选择了div.demo中a元素，而a元素的title属性中只要有"site"就符合选择条件

7.E[attr|="value"]
E[attr|="value"]被称作为特定属性选择器。这个选择器会选择attr属性值等于value或以value-开头的所有元素,如：
.demo a[lang|="zh"]{background:gray;color:yellow;}
上面代码表示的是选中了div.demo中lang属性等于zh或以zh-开头的所有a元素

伪类选择器

伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了，因为这些在平时中是常用到的伪类选择器

.demo a:link {color:gray;}
.demo a:visited{color:yellow;}
.demo a:hover{color:green;}
.demo a:active{color:blue;}

对于:hover在IE6下只有a元素支持，:active只有IE7-6不支持，:focus在IE6-7下不被支持。

CSS3的:nth选择器

:fist-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选择的元素里面没有任何内容。

1、:first-child
:first-child是用来选择某个元素的第一个子元素，比如:
.demo li:first-child {background: green; border: 1px dotted blue;}
可以让列表中的"1"具有与从不同的样式

2、:last-child
:last-child选择器与:first-child选择器的作用类似，不同的是":last-child"选择是的元素的最后一个子元素，比如:
.demo li:last-child {background: green; border: 2px dotted blue;}
可以让列表中的"10"具有与从不同的样式

3、:nth-child()
:nth-child()可以选择某个的一个或多个特定的子元素

:nth-child(length);
:nth-child(n);
:nth-child(n*length)
:nth-child(n+length);
:nth-child(-n+length)
:nth-child(n*length+1);
//上面length为整数

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

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

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

4、:nth-last-child()
":nth-last-child()"选择器和前面的":nth-child()"很相似，只是这里多了一个last，所以他起的作用就和前面的":nth-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;}

6、:nth-last-of-type
他和前面的:nth-last-child一样使用，只是他指一了元素的类型而以。

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

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

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

如果我需要在div.post只有一个p元素的时候，改变这个p的样式，那么我们现在就可以使用:only-child,如：
.demo .post p:only-child {background: red;}
此时只有div.post只有一个子元素p时，那么他的背景色将会改变
:only-of-type是表示一个元素他有很多个子元素，而其中只有一个子元素是唯一的，那么我们使用这种选择方法就可以选择中这个唯一的子元素,我们可以用以下代码举例来说明：

Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

如果我们想只选择中上面中的p元素，我们就可以这样写，
p:only-of-type{background-color:red;}

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

否定选择器（:not）

否定选择器和jq中的:not选择器一模一样，就拿form中的元素来说明这个选择器的用法，比如你想对form中所有input加边框，但又不想submit也起变化，此时就可以使用:not为实现
input:not([type="submit"]) {border: 1px solid red;}

伪元素

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: 0;
     visibility: hidden;
  }
 .clearfix:after {clear: both;}
 .clearfix {zoom: 1;}

转自Bubbling Yu