最近评论
正在载入评论列表...
使用派生选择器
Using Descendent Selectors
派生选择器对于有效的网站建设是个强大的工具。如第3章所述，它们让你找出要应用比标签样式更精确的样式的标签，并且用比类样式更少的工作。大多数时候，你要把导航栏上的所有链接格式化成一样，但并不意味着你要把整张网页中的所有链接都格式化成一个模样。你需要的是一种方式说（以CSS）“只把导航栏上的链接格式化成这样”，不一定要应用一个类样式给那些链接中的每一个。换句话说，你要有根据位置来以不同方式格式化同一个HTML的能力——并且这也正是派生选择器提供的功能（见图14-6）。
划分网页
Compartmentalize Your Pages
有效使用派生选择器的最大同盟是<div>标签。由于这个HTML标签让你在一张网页中创建逻辑分区，你可以用它辨别不同的布局元素，比如一条横幅、一个工具条、一列文本，等等。如第47页所述，你可以通过把HTML包在一个<div>里面，把不同的网页内容组织进不同的区域。
组合故事的标题和一系列常常用来导航故事页面的链接，像这样：
<div>
<h2>The CosmoFarmer Revolution</h2>
<ul>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</div>
添加了这个<div>之后，用一个类或者ID属性出于CSS目的地辨别它：<div class="pullQuote">或者<div id="banner">。当你要在一张网页中不只一次地包括同一类布局元素时——可能在单个故事中有多个拖出式引用（pull quote）——就使用一个类。对于每页只出现一次的区域——比如横幅（banner）——ID是常用的选择。
假设上述HTML中的一列链接在一张网页中出现两次——在文本开头和结尾处。你最好给它应用一个像这样的类：
<div class="storyNav">
<h2>The CosmoFarmer Revolution</h2>
<ul>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
</div>
提示：你不一定总要添加<div>标签来定义一组元素的样式。如果上述HTML只有一个链接的无序列表，并且不包括<h2>标签，那么你可能只是轻松地跳过这个<div>标签，并简单地添加一个类给这个无序列表：<ul class= "storyNav">。
一旦辨别出了网页中的每个<div>，使用派生选择器来锁定一个特定<div>里面的标签就变得很容易了。假设你要给上述HTML中的每个链接创建一种独特的展现效果，你得创建一个派生选择器，像这样：
.storyNav a {
color: red;
background-color: #ccc;
}
现在，链接将以红色文本显示在一个浅灰色的背景上，但只有当它们出现在另一个应用了类storyNav的标签里面的时候才生效。最好，如果你要给这个列表添加另一个链接（如page4.html），那么你不一定要像格式化其他链接一样大费周折。当它应用了那个派生选择器时，浏览器就会自动处理这一切。
格式化这个<div>内部的其他标签，只是创建一个派生选择器这么简单，以类名开头，例如.storyNav，后面跟着一个空格和你要进行样式设置的标签。要格式化出现在<div>内部的<h2>标签，就要创建这个派生选择器：.storyNav h2。
标识主体（Body）
Identify the Body
由于派生选择器提供如此具体的样式目标，你不仅可以轻松地创建只应用给网页中一个特定区域的样式，还可以创建只应用给你网站上特定类型的网页。假设你要给主页上的<h1>标签进行不同于网站上其他页面的样式设置。区别主页上的<h1>标签的一种简单的方法是添加一个类或者ID给主页的<body>标签：
<body id="home">
或者
<body class="home">
你可以用一个派生选择器：#home h1（如果你正使用一个ID）或者.home h1（如果你正使用一个类）给主页上的<h1>标签定义样式。用这种方法，你可以给网站中任何特定网页中的任何标签创建完全不同的展现效果。一种方法是辨别每张网页所在的网站部分。假设你的网站被分成几个部分——news、events、articles和links。在一个部分内部的每张网页上，添加一个类或者ID给<body>标签。因此在news部分里面的每张网页可能都有以下HTML：<body class="news">，而在events部分里面的网页会有<body class="events">。
提示：你也可以用一个类来辨别要给特定网页的布局类型（比如一个一列、两列或者三列的设计）。
辨别网站上一张网页的不同部分的一大好处是可以高亮突显那个部分在导航栏上的按钮。高亮显示的按钮相当于一种“你在此处”的标记，如图14-7所示。如果一张网页是在你网站的news部分，你可以高亮突显这个“news”按钮，以便访问者可以立即知道它们正处在哪个部分。
这是根据处在你网站的哪个部分，如何不同地格式化一个导航按钮的步骤：
1. 给表明网页处在哪个部分的<body>标签添加一个识别器。
例如，<body id="home">。给每个部分进行同样的动作，因此在网站news部分中的网页将有像这样的代码：<body id="news">。
2. 给网页添加一个导航栏。
逐步的指令请见第218页。
3. 辨别导航栏内部的每个链接。
对于指向主页（home page）的一个链接，你可能有这样的代码：<a href="/index.html" id="homeLink">Home</a>。这个ID让你辨别这个特定链接就是引向主页的那一个（你可以利用一个类而不是ID来做这同一件事）。给其他链接重复：<a href="/news/" id="newsLink">News</a>，等等。
此时，在你的HTML中有足够的信息来用CSS独特地格式化每个部分的链接。在这个例子中，你知道Home页面链接只被嵌套在home页面上带有ID home的<body>标签内部。
4. 当链接处在那个部分的网页内部时，创建一个派生选择器，对每个部分的链接进行不同的格式设置。
对于这个例子中的home页面，派生选择器应该看起来像这样：
#home a#homeLink
这个选择器只有当它处在另一个带有ID #home的标签里面时才格式化#homeLink。大部分情况下，你会要“你在此处”按钮的展现效果与网站上每个部分的按钮都一样，因此你可以用一个群选择器（见第53页），把每个部分的按钮的所有派生选择器组合起来。这样，你可以应用相同的格式给每个按钮，不用给每个按钮创建单独的规则。一个用来以浅黄色背景高亮突显当前部分的导航按钮的群选择器，可能看起来像这样：
#home a#homeLink,
#news a#newLink,
#articles a#articlesLink,
#links a#linksLink {
background-color: #FBEF99;
}
提示：在创建一个包括几个派生选择器的群选择器时，使每个选择器都处在各自的行上，就像这个例子一样。当你需要返回来编辑样式表时，更易于辨别组合中的每个选择器。
利用相同的方法，使其他样式在你的鼠标经过链接、点击链接或者当链接已经被访问的时候，给链接应用不同的展现效果。详情请见第209页。
这几个例子只是你可以利用派生选择器的一部分实例。它们会使你的样式表更复杂一点。例如，你会有像#home .navbar a这样的样式，而不是像.navLink这样一个简单的类。但是一旦样式建立起来了，你就几乎不需要进行进一步的格式化设置了。粘贴进网页不同区域的HTML以令人侧目的方式自动地获得了格式，几乎就像魔法一样。
图书导读
