日期:2014-05-17  浏览次数:20486 次

CSS 中的选择器总结

主要应用的选择器就三类:元素选择器,ID选择器,类选择器。

选择器的结合关系有三种:后代结合、子元素结合、相邻兄弟结合。


元素选择器就是以html文档中的标准元素标签作为选择器的标志的。如:

h1 {color:red; font-size:14px;}

ID选择器,以元素的唯一ID作为选择器标志。如:

#red {color:red;}
#green {color:green;}

类选择器,以元素的类(class)作为选择器标志。如:

.center {text-align: center}

从选择器的结合关系来看:

后代结合,就是两个选择器之间用空格分开。如 “A B”,表示A所选择的元素中包含的B所选择的元素。如:

.fancy td {
	color: #f60;
	background: #666;
	}

上述例子,表示fancy类的元素中包含的td元素。注意:这个包含不一定是相邻子代包含,可以是孙代包含,故名后代结合。


子元素结合,两个选择器之间用“>”隔开。如 “A > B”,表示A所选择元素的相邻子代元素中B所选择的元素。如:

h1 > strong {color:red;}
<h1>This is <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
上述例子,在第一句中应用了该样式,在第二句中没有。因为第二句中 h1 和 strong 不是相邻子元素关系。


相邻兄弟结合,两个选择器之间用 “+” 隔开。如 “A + B”,表示A和B为相邻元素,并且有同一个父元素,即他俩为兄弟元素。该选择器选择的是B元素。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1 + p {margin-top:50px;}
</style>
</head>

<body>
<h1>This is a heading.</h1>
<p>This is paragraph.</p>
<p>This is paragraph.</p>
</body>
</html>

上例中,第二个p元素没有应用样式,而第一个应用了。


知道了选择器种类以及选择器的结合方式,就会创造出许多种神奇应用了。如:

html > body table + ul {margin-top:20px;}
这个选择器解释为:选择紧接在 table 元素后出现的所有兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。