征服高级CSS选择器(2)

a[href*=".jpg"] {
 background: url(jpeg.gif) no-repeat left 50%;
 padding: 2px 0 2px 20px;
 }
 
a[href*=".pdf"] {
 background: url(pdf.gif) no-repeat left 50%;
 padding: 2px 0 2px 20px;
 }
 
a[href*=".doc"] {
 background: url(word.gif) no-repeat left 50%;
 padding: 2px 0 2px 20px;
 }

在此例中，我们使用了一个定位所有的链接(a)的href属性分别以.jpg,.pdf或.doc结束(*)的属性选择器。详细可查看前端观察之前的一篇文章《使用CSS选择器创建个性化链接样式》

浏览器支持

除了Internet Explorer 6，所有的主流浏览器都支持属性选择器。这意味着，如果你在你的网站上使用了属性选择器，你应该确保IE6用户将仍能获得一个可用的网站。比如我们的第三个例子，为链接添加图标可以给你的网站带来另一个级别的可用性，但是如果这些链接不显示任何图标，该网站仍然还是可用的。

2. 子选择器

子选择器用符号“>”表示。它允许你定位某个元素的第一级子元素。

比如，如果你想匹配所有的作为你的网站侧栏的p的子元素的h2元素，而不是可能是在p元素内的所有h2元素，也不是p的孙元素(或者更低级别的)，你就可以使用下面的选择器：

p#sidebar > h2 {
 font-size: 20px;
 }

你当然也可以同时使用子元素和后代元素。比如，如果你想定位只有在body元素的子级p元素内的blockquote元素(比如你想匹配主要的p内的blockquotes，而不是其它部分的：

body > p > p blockquote {
 margin-left: 30px;
 }

浏览器支持

和属性选择器一样，子选择器不被IE6支持。如果你通过这种方式要实现的效果和网站的可用性或总体设计息息相关，你可以考虑使用一个class，或者使用只针对IE6的样式，但是这将有悖使用子选择器的目的。

3. 兄弟组合

有两类兄弟组合：临近兄弟组合和普通兄弟组合

临近兄弟组合
该选择器使用加号“+”来链接前后两个选择器。选择器中的元素有同一个父亲，而且第二个必须紧紧的跟着第一个。

临近兄弟组合可以灰常有用，比如，在处理文字的时候。比如我们想对段落后面的h2标题添加一个顶间距“margin-top”(当然或许你无需为h1标签后面的h2添加，或者它可能是页面的第一个元素)：

p + h2 {
 margin-top: 10px;
 }

你甚至可以更加具体，你想定位某个特定的p后面的h2：

p.post p + h2 {
 margin-top: 10px;
 }

或者你可以搞得更加复杂：页面的第一个段落的第一行字母显示为小写字母。

.post h1 + p:first-line {
 font-variant: small-caps;
 }

因为可能大部分日志/文章的第一个段落都会紧紧的在H1标签的后面。你可以在你的选择器中借助于h1标签。

普通兄弟组合

普通兄弟组合和临近兄弟组合的工作原理很像，不同的是第二个选择其无需紧紧跟随第一个。

如果你需要定位所有的某个特定的p里面并且跟在h1标签后面的p标签的话(你可能想要这些p标签比拟的日志的标题前面的文字大些)，你就可以使用这个选择器：

.post h1 ~ p {
 font-size: 13px;
 }

注：这两个选择器太像了，所有不是很好理解，可以试一试下面的这个例子：

CSS:

p + h2{color:red;
 }
 p ~ h2{font-weight:700;
 }

HTML:

<p>咳咳，内容。</p>
<h2>标题1</h2>
<h2>标题2</h2>

看看第二个h2的颜色就可以理解了吧？临近兄弟组合只能匹配第一个选择器后面的第一个兄弟选择其，普通兄弟组合则能匹配所有。注：该部分英文原文没有，是神飞翻译时自己添加。

浏览器支持

Internet Explorer 6依然不能理解兄弟选择器，但是，另一种情况，如果你的用户中只有一小部分是IE6用户，而且网站的结构不会被破坏或者受到严重影响，这是实现很多很酷的效果而无需在你的HTML代码中添加无用的class或id。

4. 伪类

动态伪类

之所以被称为动态伪类是因为它们并不存在于HTML中——而是只有当用户和网站交互的时候才会呈现。

有两类动态伪类：链接 和用户行为。链接就是:link 和:visited，而用户行为包括:hover、:active 和:focus。

在本文中提到的css选择器中，这几个应该是最常用到的。

:link伪类用于链接尚未被用户访问的时候，而:visited 伪类用于用户访问过的链接，也就是说它们是相反的。

:hover伪类用于用户移动他们的鼠标在元素上，而尚未触发或点击它的时候。:active伪类应用于用户点击元素的情况。最后，:focus伪类用于元素成为焦点的时候——最常用于表单元素。

你可以在你的样式表中使用多种用户行为动态伪类，这样你就可以，比如，根据用户的鼠标只是滑过或悬停的时候，为一个输入框定义不同的背景色:

input:focus {
 background: #D2D2D2;
 border: 1px solid #5E5E5E;
 }
input:focus:hover {
 background: #C7C7C7;
 }

浏览器兼容性

动态伪类被所有的现代浏览器支持，甚至IE6，但是请注意，对于IE系列浏览器来说，IE6只允许:hover 伪类应用于链接元素(a标签)而且只有IE8接受:active状态。

:first-child
:first-child伪类允许你定位某个元素第一个子元素。比如，如果你想给你的无须列表的第一个li添加一个margin-top，你就可以这样写：