随笔 - 28, 文章 - 0, 评论 - 3, 引用 - 0
数据加载中……

相邻选择器

这个选择器的正式名称(根据W3C)是临近同属组合器。我觉得这个名称既长又复杂,因此把它简称为相邻选择器。虽说是"相邻",但相邻选择器选取的却是一个元素的下一个元素。基于图3-14中的标记,图3-24中的标记示范了相邻选择器的形式。

注意:

IE 6本身并不支持相邻选择器;请查阅本书的网址www.wrox.com/go/beginning_css2e以获取兼容性方面的帮助。

 
图  3-24

在图3-24中,可以看到加号被用来表示两个元素之间的相邻关系。你在这点上也许会有疑问:这么做看起来很舒服,但实际用途是什么?难道不能单独引用div#body来达到同样的效果吗?为什么需要一个相邻选择器?很高兴你这样问。在特定的情况下这个选择器会发挥作用,比如当几份HTML文档引用同一份样式表时。在一部分文档中,带有id名称heading的<div>元素和带有id名称body的<div>元素是相邻的,即它们在源文件中相继出现。在其他文档中这两个元素或许不是相邻的。如果你对这两种理论上不同的文档有不同的模板需求的话,自然会想通过某种方法来引用那些相邻的元素,这就是相邻选择器实际应用的一个例子。正如我在上一节"直接子选择器"中提到的那样,有时你不想创建新的id和类名。在某些情况下,当你使用相邻选择器时,能够避免创建新的类和id名称。

在接下来的概念验证型例子中,你将亲自试验相邻选择器。

试一试 相邻选择器

例3-5  按以下步骤,了解相邻选择器是如何工作的。

1. 在文本编辑器中输入以下标记:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
<head>
<title>Next Sibling Selectors</title>
<link rel='stylesheet' type='text/css' href='Example_3-5.css' />
</head>
<body>
<h1>Next Sibling Selectors</h1>
<p>
The next sibling selector (or adjacent sibling combinator as
it's officially called) allows you to select an element based on
its sibling. This paragraph has a lightyellow background and
darkkhaki text.
</p>
<p>
This paragraph has a yellowgreen background and green text.
</p>
<p>
This paragraph has no colored background, border, or text.
</p>
</body>
</html>

2. 保存上述标记为Example_3-5.html。

3. 在文本编辑器中输入以下CSS:

body {
font: 12px sans-serif;
}
p {
padding: 5px;
}
h1 + p {
background: lightyellow;
color: darkkhaki;
border: 1px solid darkkhaki;
}
h1 + p + p {
background: yellowgreen;
color: green;
border: 1px solid green;
}
4.保存样式表为Example_3-5.css。将它在支持相邻选择器的浏览器中载入,你将看到如图3-25所示的结果。
 
(点击查看大图)图  3-25

工作原理

相邻选择器基于相邻关系应用样式。下面是对Example_3-5.css中有关样式的分析。

Example_3-5.css中的第一个样式应用于Example_3-5.html的第一段。h1 + p表示如果<p>元素是直接跟在<h1>元素后的元素,则应用本规则中的声明。

h1 + p {
background: lightyellow;
color: darkkhaki;
border: 1px solid darkkhaki;
}

只有当<p>元素是直接与<h1>元素相邻的元素时,这条规则才起作用。

第二条规则里使用了一个更为复杂的相邻选择器。它表示如果一个<p>元素直接相邻于另一个<p>元素,并且后者也直接相邻于一个<h1>元素时,应用本规则中的声明。

h1 + p + p {
background: yellowgreen;
color: green;
border: 1px solid green;
}

就像直接子选择器可以基于父子关系应用样式一样,相邻选择器可以基于相邻关系应用样式。

在很多时候,如果能基于元素的属性或属性值应用样式会很有用。

posted on 2010-02-26 13:10 Angle Wang 阅读(305) 评论(0)  编辑  收藏 所属分类: CSS


只有注册用户登录后才能发表评论。


网站导航: