akasuna.com

可能你已经学过了 CSS 的 ID 选择器、类选择器和后代选择器，但是这就够了吗？

可能不太够，对于 CSS 而言，还有很多灵活的使用方法。

本文将向你介绍一些常用的 CSS 选择器方法，其中有一些是 CSS3 选择器，只有比较新的浏览器才支持，但是这些新选择器同样要记住，因为像 IE6 之类旧浏览器终将被淘汰。

OK，开始。

1. *

* {
	margin: 0;
	padding: 0;
}

此星号将选择当前页面内所有标签，相信很多人都使用过这招来清空浏览器默认的 margin 和 padding，如果是在测试的时候，用这招当然没什么问题，但是在正式的产品中尽量不要这样用，据说它会大大加重浏览器的负担，而且也没必要清空所有标签的 margin 和 padding。

* 同样可以作为子选择器使用：

#container * {
	border: 1px solid black;
}

以上代码将为 ID 为 container 容器内所有标签加上一个像素宽的黑色实线边框。

2. #X

#container {
	width: 960px;
	margin: auto;
}

以 # 开头的选择器允许我们根据 ID 来选择标签，这种选择器最为常用。ID 选择器用法比较严格，对于一个 HTML 文档而言，不允许出现 ID 相同的标签，因此 ID 选择器只能选择一个标签。

3. .X

.error {
	color: red;
}

这个是类选择器，类选择器和 ID 选择器的区别是 HTML 中的类可以重复，也就是说通过类选择器可以选择多个标签，当 HTML 中的多个标签有共同特性时，可以把他们定义为一个类，这样在 CSS 中就可以很容易的选择它们。

4. X Y

li a {
	text-decoration: none;
}

这个一般称为后代选择器。例如，你并不像选择所有超链接，而只想选择 li 标签中的超链接，就可以用后代选择器。

5. X

a {
	color: red;
}

ul {
	margin-left: 0;
}

如果你想通过标签类型来选择页面上的所有标签，可以使用这种标签选择器。例如，你想要选择页面上所有超链接，可以使用 a { }。

6. X:visited 和 X:link

a:link {
	color: red;
}
a:visited {
	color: purple;
}

这是伪类选择器，我们可以使用 a:link 来选择所有没被点击过的超链接，也可以用 :visited 来选择所有被点击过或访问过的超链接。

7. X + Y

ul + p {
	color: red;
}

这个可以称为邻近选择器，以上面的代码为例，它只能选择紧跟着 ul 的 p 标签，而且只有 ul 后面的第一个 p 会被选中。

8. X > Y

div#container > ul {
	border: 1px solid black;
}

X > Y 和 X Y 的不同之处前者只能选择 X 的直接后代。例如如下标签：

<div id="container">
	<ul>
		<li> List Item
			<ul>
				<li> Child </li>
			</ul>
		</li>
		<li> List Item </li>
		<li> List Item </li>
		<li> List Item </li>
	</ul>
</div>

基于以上 HTML 代码，#container > ul 选择器只能选择 id 为 container 的 div 下面的 ul，而 li 下面的 ul 却选择不到。

9. X ~ Y

ul ~ p {
	color: red;
}

这种选择器和 X + Y 有相似之处，但是又没有 X + Y 严格，对于邻近选择器（ul + p）而言，只能选择紧跟着 ul 的第一个 p 标签，而 ul ~ p 却可以选择 ul 后面的所有 p 标签。

10. X[title]

a[title] {
	color: green;
}

这个称为属性选择器，例如上面的代码，只能选择出具有 title 属性的超链接。

11. X[href="foo"]

a[href="http://akasuna.com"] {
	color: #1f6053;
}

上面的 CSS 代码，只会选择链接到 http://akasuna.com 的超链接设置为绿色，而其它超链接则不受影响。如果你想为指向不同站点的超链接指定不同的颜色，这是个好方法。

12. X[href*="akasuna"]

a[href*="akasuna"] {
	color: #1f6053;
}

这种方法更为常见，*= 表示指定的字符串必须出现在属性的值里面，这样一来，akasuna.com，demo.akasuna.com，bbs.akasuna.com 甚至是 akasuna2.com 都将被此选择器选择到。

13. X[href^="http"]

a[href^="http"] {
	background: url(path/to/external/icon.png) no-repeat;
	padding-left: 10px;
}

有些网站会在超链接的旁边显示一个图标来表示此链接为外部链接，估计大多数人都见过这样的设计，此图标用来提醒访客，点击此链接将打开另外一个完全不同的网站。

其实要做到这点也很容易，只要判断一下超链接地址的开头部分就行了，如果超链接的 href 属性是以 http 开头的，那么就说明它是外部链接，就像上面的代码那样。

注意：我们这里判断的是 http 而非http://，一是没必要，二是为了兼顾 https:// 之情况。

另外，使用这种方法的话，有一个前提，所有内部链接都用相对路径而非绝对路径，这样才能保证内部链接不是以 http 开头。

如果我们要为那些链接向图片的超链接设置特定的样式呢，这种情况就要判断超链接地址的末尾部分了。

14. X[href$=".jpg"]

a[href$=".jpg"] {
	color: red;
}

使用 $，表示的是字符串的末尾部分，这里我们要查找那些链接向图片的超链接，也就是 url 地址是以 .jpg 结尾的那些。注意，这里没有考虑 .gif 和 .png 的情况。

15. X[data-*="foo"]

a[data-filetype="image"] {
	color: red;
}

接着上面的第 14 条，如果我们兼顾各种图片格式，例如：png，jpg，jpeg，gif，又该怎么办呢？你可能会想到下面这种方法：

a[href$=".jpg"],
a[href$=".jpeg"],
a[href$=".png"],
a[href$=".gif"] {
	color: red;
}

但是这样写起来稍微有点痛苦，而且低效。其实我们这里可以使用自定义属性，为所有指向图片的超链接添加一个属性 data-filetype，如：

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

然后就可以在 CSS 里面使用标准的选择器来选择这些超链接了。

a[data-filetype="image"] {
	color: red;
}

16. X[foo~="bar"]

a[data-info~="external"] {
	color: red;
}

a[data-info~="image"] {
	border: 1px solid black;
}

参照上面的第 15 条那个自定义属性，我们可以创建一个 data-info 属性，这个属性值可以接收多个值:

<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

这样一来，通过一个属性就可以表达两层意思：1. 它是外部链接；2. 它是指向图片的链接。然后就可以用 CSS 分别对此超链接设置样式：

/* 选择 data-info 属性中包含有 "external" 的那些超链接 */
a[data-info~="external"] {
	color: red;
}

/* 选择 data-info 属性中包含有 "image" 的那些超链接 */
a[data-info~="image"] {
	border: 1px solid black;
}

17. X:checked

input[type=radio]:checked {
	border: 1px solid black;
}

又是一个伪类选择器，它能选择那些被选中的标签，例如单选框、复选框等，用起来应该很简单。

18. X:after

这个不是伪类，而是伪元素，对应的还有 :before，从字面上看，它们分别表示元素的前面和后面，实际上它们的功能是在元素的前面或后面添加内容，需要和 CSS 的 content 属性配合使用，如：

h1:after {
	content:url(logo.gif)
}

在显示时，标题内容后会插入一张图片，这就是伪元素 :after 的作用。

19. X:hover

div:hover {
	background: #e3e3e3;
}

拜托，这个大家都会的，它表示当鼠标在元素上悬停时的样式。

注意：在老版本 IE 中，这个伪类只对超链接有效，对其它任何元素无效！

常见的用法是，当鼠标悬停的找链接上的时候，给超链接设置一个底部边框：

/* order-bottom: 1px solid black; 的效果看起来比 text-decoration: underline; 要好一些 */
a:hover {
	border-bottom: 1px solid black;
}

20. X:not(selector)

div:not(#container) {
	color: blue;
}

嗯，这个伪类选择器比较有用。试想一下，如果你要选择页面中除了 id 为 container 之外的所有 div，这段代码应该就是你想要的。

或者，你想要选择页面中除了 p 标签外的所有标签：

*:not(p) {
	color: green;
}

但是这应该很少用到。

21. X::pseudoElement

p::first-line {
	font-weight: bold;
	font-size: 1.2em;
}

我们可以使用伪元素（这里用的是 :: 哦）为元素的某部分设定样式，例如段落的第一行，或者第一个字母。切忌，这种方法只对块级元素起作用。

为段落的第一个字母设定样式：

p::first-letter {
	float: left;
	font-size: 2em;
	font-weight: bold;
	font-family: cursive;
	padding-right: 2px;
}

这段代码将为页面上所有段落设置首字下沉的效果，这种样式在报纸上经常可以看到。

22. X:nth-child(n)

li:nth-child(3) {
	color: red;
}

nth-child 伪类选择器以一个整数作为参数，不包括 0，要从 1 开始。如果你想选择列表元素中的第 2 个，可以使用 li:nth-child(2)。

这个方法当然也可以用来选择多个元素，例如 li:nth-child(4n) 就可以用来选择列表元素中的第 4 个，第 8 个，第 12 个 ……（4 的倍数）。

23. X:nth-last-child(n)

li:nth-last-child(2) {
	color: red;
}

如果一个 ul 中的有 400 个条目，而你只想选择其中的倒数第 2 个，该怎么办呢？

相比 li:nth-child(399) 而言，nth-last-child(2) 也许更为适合。

24. X:nth-of-type(n)

ul:nth-of-type(3) {
	border: 1px solid black;
}

有时候，你不是想选择 ul 中的第 3 个 li，而是想选择第 3 个 ul，而这些 ul 又没有 id， 该怎么办呢？

此时应该使用 nth-of-type(n)，上述代码将为页面中的第三个 ul 设置一个 1 个像素的黑色边框。

25. X:nth-last-of-type(n)

ul:nth-last-of-type(3) {
	border: 1px solid black;
}

请参照第 23 条中的 nth-last-of-type 自行理解。

26. X:first-child

ul li:first-child {
	border-top: none;
}

这个伪类用来选择父元素中的第一个子元素，对应的还有 X:last-child。你可以用它来删除列表中第一个元素和最后一个元素的边框。

例如，有一个列表，如果列表中每个元素都有一个 border-top 和 border-bottom，那么第一个元素和最后一个元素的边框看起来就有点多余了。

很多人都会想到为第一个元素和最后一个元素分别设置一个 first 和 last 类名称，然后通过这个类名称清楚他们的边框。这样当然也是可以的，但是用伪类同样也可以达到效果，具体请看下面的第 27 条。

27. X:last-child

ul > li:last-child {
	color: green;
}

和 first-child 对应，last-child 用来选择父元素中的最后一个子元素。结合上面的第 26 条，有如下示例：

HTML 代码

<ul>
	<li> List Item </li>
	<li> List Item </li>
	<li> List Item </li>
</ul>

CSS 代码

ul {
	width: 200px;
	background: #292929;
	color: white;
	list-style: none;
	padding-left: 0;
}

li {
	padding: 10px;
	border-bottom: 1px solid black;
	border-top: 1px solid #3c3c3c;
}

这段 CSS 代码为列表设置了背景色，消除了 ul 默认的内边距，并对每个 li 设置了边框，边框颜色深于 ul 的背景色。

问题来了，正如图片上所示，此无序列表的最顶端和最低端也有边框，这看起来有点不爽。下面我们用 :first-child 和 :last-child 来解决这个问题：

li:first-child {
	border-top: none;
}

li:last-child {
	border-bottom: none;
}

效果如图所示，最顶端和最低端的边框没有了，问题解决了。

28. X:only-child

div p:only-child {
	color: red;
}

实际上，你可能会发现 only-child 这种伪类并不常用，但是在某些场合，你还非用它不可。

only-child 用来选择那些是父元素中唯一的子元素的元素（独生子女！）。例如上面的代码，如果某个 div 中只有一个段落，那么这个段落将会以红色字体显示，如果有多个段落，则不受影响。

看下面的 HTML 代码：

<div>
	<p> My paragraph here. </p>
</div>

<div>
	<p> Two paragraphs total. </p>
	<p> Two paragraphs total. </p>
</div>

这段 HTML 代码中，第二个 div 中有 2 个段落，这两个选择器不会被此选择器选择到；而第一个 div 中只有 1 个段落，因此这个段落是 only-child，它会以红色字体显示。

29. X:only-of-type

li:only-of-type {
	font-weight: bold;
}

跟第 28 条类似，都是选择子元素。区别是：第 28 条中，选择的是唯一子元素（独生子女，不管是男的还是女的，反正只有一个）；而第 29 条中，选择的是某类型的唯一元素（可以有多个孩子，但是性别不能相同，假如是两男一女，那么这个唯一女性将被选择到）。

30. X:first-of-type

first-of-type 伪类选择的是相同类型元素中的第一个元素。

为了便于理解，不妨来做个测试，请将如下代码拷贝至文本编辑器中：

<div>
	<p> My paragraph here. </p>
	<ul>
		<li> List Item 1 </li>
		<li> List Item 2 </li>
	</ul>

	<ul>
		<li> List Item 3 </li>
		<li> List Item 4 </li>
	</ul>
</div>

此时，如果让你用 CSS 选择 List Item 2，该如何做呢？

方案一：

有多种方法可以达到效果，先来看第一种，使用 first-of-type

ul:first-of-type > li:nth-child(2) {
	font-weight: bold;
}

这段代码的意思是，先找到页面中的 ul，找到了 2 个 ul，那么选择第 1 个，然后再此无序列表中选择第 2 个 li。

方案二：

第二种方法是用邻近选择器

p + ul li:last-child {
	font-weight: bold;
}

找到紧跟着 p 元素的 ul，然后选择此 ul 中的最后一个 li 即可。

方案三：

ul:first-of-type li:nth-last-child(1) {
	font-weight: bold;
}

跟方案一类似，先找到第一个 ul，然后找到其倒数第一个 li。

结语

如果你在使用如 IE 6 之类的低版本浏览器，那么以上有些比较新 CSS 选择器可能不适合。但是不要因为自己使用的是低版本浏览器，就不学习这些新的 CSS 选择器，不学的话吃亏的还是自己。这里有一个浏览器兼容性列表，另外你也可以使用 Dean Edward 的 IE9.js 让你的低版本 IE 支持一些IE9 的特性。

另外，当使用一些如 jQuery 之类的 JS 库的时候，尽量在使用过程中用标准的 CSS3 选择器，而非 JS 库自定义的选择器，如果可能的话，JS 库使用浏览器自身的 CSS 解析器，比使用 JS 库自定义的解析器 速度更快。

本文翻译自 The 30 CSS Selectors you Must Memorize，并稍作修改。基本上每种选择器都有对应的 DEMO，请至原文查看。