您的位置：首页 > Web前端 > CSS

CSS中的选择器总结

2012-12-13 21:31 393 查看

主要应用的选择器就三类：元素选择器，ID选择器，类选择器。

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

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

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

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

#red

{color:red;}

#green

{color:green;}[/code]

类选择器，以元素的类（class）作为选择器标志。如：

.center

{text-align: center}[/code]

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

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

.fancy td

{
color: #f60;
background: #666;
}[/code]
上述例子，表示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 元素的子元素。

转自：/article/2464524.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航