CSS 选择器

CSS选择器的优先级：

那么你如何计算指定选择器的优先级？如果你考虑到将优先级表示为用逗号隔开的四个数字就会相当简单，比如：1, 1, 1, 1 或0, 2, 0, 1

1. 第一个数字(a)通常就是0，除非在标签上使用style属性；
2. 第二个数字(b)是该选择器上的id的数量的总和；
3. 第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])；
4. 第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等)；
5. 通用选择器(*)是0优先级；
6. 如果两个选择器有同样的优先级，在样式表中后面的那个起作用。

让我们看几个例子，这样或许比较容易理解些：

• #sidebar h2 — 0, 1, 0, 1
• h2.title — 0, 0, 1, 1
• h2 + p — 0, 0, 0, 2
• #sidebar p:first-line — 0, 1, 0, 2

在下面的例子中，第一个将会起作用，因为它比第二个优先级高：

• #sidebar p#first { color: red; } — 0, 2, 0, 1
• #sidebar p:first-line { color: blue; } — 0, 1, 0, 2

通用选择器：

通用选择器即星号*，该选择器的作用是选择文档中的全部元素并对其应用样式。有点想正则表达式的通配符。

比如在css文件顶部对页面的外边距和内边距重置为0：

* { margin: 0; padding: 0;}

又比如下面的html，选择div中的全部元素：

<div>
	<h2>title</h2>
	<p>heihei</p>
	<ol>
		<li>hello</li>
		<li>hello</li>
		<li>hello</li>
	</ol>
</div>

可以使用以下CSS代码：

div * { border: 1px solid #000; }

属性选择器：

属性选择器(Attribute selector)让你可以基于属性来定位一个元素。你可以只指定该元素的某个属性，这样所有使用该属性——而不管它的值——的这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素 —— 这就是属性选择器展示它们的威力的地方。

CSS3的属性选择器主要包括：

1. E[attr]：只使用属性名，但没有确定任何属性值；
2. E[attr="value"]：指定属性名，并指定了该属性的属性值；
3. E[attr~="value"]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；(比如，class=”title featured home”)
4. E[attr^="value"]：指定了属性名，并且有属性值，属性值是以value开头的；
5. E[attr$="value"]：指定了属性名，并且有属性值，而且属性值是以value结束的；
6. E[attr*="value"]：指定了属性名，并且有属性值，而且属值中包含了value；
7. E[attr|="value"]：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;

为了更好的说明CSS3属性选择器，看以下demo：

<div class="demo clearfix">
	<a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
	<a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
	<a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
	<a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
	<a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
	<a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
	<a href="" class="links item" title="open the website" lang="cn">7</a>
	<a href="" class="links item" title="close the website" lang="en-zh">8</a>
	<a href="" class="links item" title="http://www.sina.com">9</a>
	<a href="" class="links item last" id="last">10</a>
</div>

初步美化一下上面的代码：

.demo {
	width: 350px;
	border: 1px solid #ccc;
	padding: 10px;	
}
.demo a {
	display: inline-block;
	height: 20px;
	width: 20px;
	line-height: 20px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	margin-right: 5px;
	color: #FFF;
	background: #f36;
	text-align: center;
	text-decoration: none;
}

最终效果如下图

一、E[attr]：

E[attr]属性选择器是CSS3属性选择器中最简单的一种。如果你希望选择有某个属性的元素，而不论这个属性值是什么，你就可以使用这个属性选择器，如：

.demo a[id] {background: blue; color:yellow;font-weight:bold;}

效果如下：

因为只有第一个和第十个a标签设置了id

二、E[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;}

效果如下：

因为第一个a标签的id的值为first

三、E[attr~="value"]：

如果你想根据属性值中的词列表的某个词来进行选择元素，那么就需要使用这种属性选择器：E[attr~="value"]，这种属性选择器是属性值是一个或多个词列表，如果是列表时，他们需要用空格隔开，只要属性值中有一个value相匹配就可以选中该元素，而我们前面所讲的E[attr="value"]是属性值需要完全匹配才会被选中，他们两者区别就是一个有“〜”号，一个没有“〜”号。我们来看一个这方面的实例：

.demo a[title~="website"] {background: blue; color:yellow;font-weight:bold;}

效果如下：

因为2，6，7，8这四个a标签的title都含有website

四、E[attr^="value"]：

Ｅ[attr$="value"]属性选择器刚好与E[attr^="value"]选择器相反，E[attr$="value"]表示的是选择attr属性值以"value"结尾的所有元素，换句话说就是选择元素attr属性，并且他的属性值是以value结尾的，这个运用在给你一些特殊的链接加背景图片很方便的，比如说给pdf,png,doc等不同文件加上不同icon，我们就可以使用这个属性来实现，如：

.demo a[href^="sites"] {background: blue; color:yellow;font-weight:bold;}

效果如下：

因为3，4，5的a标签都是以sites开头

五、E[attr*="value"]：

E[attr*="value"]属性选择器表示的是选择attr属性值中包含子串"value"的所有元素。也就是说，只要你所选择的属性，其属性值中有这个"value"值都将被选中，如：

.demo a[title*="site"] {background: blue; color:yellow;font-weight:bold;}

效果如下：

因为2，6，7，8中的title中含有site

六、E[attr$="value"]：

Ｅ[attr$="value"]属性选择器刚好与E[attr^="value"]选择器相反，E[attr$="value"]表示的是选择attr属性值以"value"结尾的所有元素，换句话说就是选择元素attr属性，并且他的属性值是以value结尾的，这个运用在给你一些特殊的链接加背景图片很方便的，比如说给pdf,png,doc等不同文件加上不同icon，我们就可以使用这个属性来实现，如：

.demo a[href$="png"] {background: blue; color:yellow;font-weight:bold;}

效果如下：

因为第四个a标签的href是以png结尾

七、E[attr|="value"]：

E[attr|="value"]是属性选择器中的最后一种，在说这个选择器使用之前先提醒大家attr后面的是一个竖线“｜”而不是l，小心搞错了。E[attr|="value"]被称作为特定属性选择器。这个选择器会选择attr属性值等于value或以value-开头的所有元素,我们来看个实例：

.demo a[lang|="zh"] {background: blue; color:yellow;font-weight:bold;}

效果如下：

因为2，3，4，6的a标签的lang是以zh开头或者就是zh

子选择器：

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

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

.demo > a { color: #000000;}

兄弟选择器：

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

临近兄弟组合

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

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

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

普通兄弟组合

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

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

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

还有类型选择器，id选择器，类选择器，后代选择器。

参考：http://www.w3cplus.com/css3/attribute-selectors

http://www.qianduan.net/taming-advanced-css-selectors.html