您当前的位置: 首页 » DIV+CSS编程 » 如何利用CSS选择器查询和风格化Web元素
如何利用CSS选择器查询和风格化Web元素
论坛链接
本文讨论另一个重要的CSS特征：选择器，它可以用来在一个页面内选择元素风格化Web页。
选择器类型
CSS样式有多种方式实现元素选择。各种各样的选择方法包括通过通用选择器，类型选择器，类选择器，ID选择器，祖先选择器，子孙选择器，邻接兄弟选择器和属性选择器进行选择。
这里我们将分别来看一下这几种方法（邻接兄弟和属性除外，我们将在下周进行讨论）。注意：浏览器对CSS选择器的支持是不一致的，不过你可以利用网上的说明来检测某个选择器是否能在你的目标浏览器使用。
通用
通用选择器允许你在整个页面中使用样式。基本上说来，一个样式并不指定具体的元素，类等，所以它适用于页面内的所有元素。这对设置颜色，字体等来说十分有用。
通用选择器可用于页面上的所有元素，但是他们可以被某些具体的选择器覆盖。CSS规范中指出可以使用星号（*）来表示一个通用选择器。列表A演示了如何使用通用选择器来为页面设定背景和默认的字体。
<html>
<head><title>CSS – Universal selectors</title>
<style type="text/css">
* {font-face: arial; font-size: 110%; color: red; background: yellow;}
</style><body>
<h1>Test Page</h1>
<p>Hey there.</p>
</body></html>类型
风格化元素的一种最常用方法是通过它的类型。也就是说一个特定的元素拥有自己定义的样式，且这个样式可用于该类型的所有元素而不管元素在页面上的位置。列表B中的例子演示了用一个类型选择器来风格化页面中的所有段元素。
<html>
<head><title>CSS – Type selectors</title>
<style type="text/css">
p { margin: 5em; color: red; }
</style><body>
<h1>Test Page</h1>
<p>Hey there.</p>
</body></html>使用这种类型选择器，叶面内的所有段落元素（除非被更多特定选择器覆盖）拥有特定的页边距和红色文本。现在你也可以自己建立CSS类来处理页面上的特定元素风格化问题。
选择器类型
CSS样式有多种方式实现元素选择。各种各样的选择方法包括通过通用选择器，类型选择器，类选择器，ID选择器，祖先选择器，子孙选择器，邻接兄弟选择器和属性选择器进行选择。
这里我们将分别来看一下这几种方法（邻接兄弟和属性除外，我们将在下周进行讨论）。注意：浏览器对CSS选择器的支持是不一致的，不过你可以利用网上的说明来检测某个选择器是否能在你的目标浏览器使用。
通用
通用选择器允许你在整个页面中使用样式。基本上说来，一个样式并不指定具体的元素，类等，所以它适用于页面内的所有元素。这对设置颜色，字体等来说十分有用。
通用选择器可用于页面上的所有元素，但是他们可以被某些具体的选择器覆盖。CSS规范中指出可以使用星号（*）来表示一个通用选择器。列表A演示了如何使用通用选择器来为页面设定背景和默认的字体。
<html>
<head><title>CSS – Universal selectors</title>
<style type="text/css">
* {font-face: arial; font-size: 110%; color: red; background: yellow;}
</style><body>
<h1>Test Page</h1>
<p>Hey there.</p>
</body></html>类型
风格化元素的一种最常用方法是通过它的类型。也就是说一个特定的元素拥有自己定义的样式，且这个样式可用于该类型的所有元素而不管元素在页面上的位置。列表B中的例子演示了用一个类型选择器来风格化页面中的所有段元素。
<html>
<head><title>CSS – Type selectors</title>
<style type="text/css">
p { margin: 5em; color: red; }
</style><body>
<h1>Test Page</h1>
<p>Hey there.</p>
</body></html>使用这种类型选择器，叶面内的所有段落元素（除非被更多特定选择器覆盖）拥有特定的页边距和红色文本。现在你也可以自己建立CSS类来处理页面上的特定元素风格化问题。
#2楼发布者：tznktg时间：2007-09-21 17:36:08
类
在决定一个样式覆盖什么内容时，类选择器比类型选择器有更多的控制。由类选择器定义的样式可以用于具有类属性的所有元素，不管该元素在页面中的位置。它可以很好的控制那些元素接受样式。列表C中的例子演示了使用类只格式化页面中的第一段。所以第一段的是锯齿状的字体，而接下来的段落与此不同。
<html>
<head><title>CSS – Type selectors</title>
<style type="text/css">
.firstp { text-indent: 2em;margin: 1em; color: red; }
p { margin: 1em; color: blue; }
</style><body>
<h1>Test Page</h1>
<p class="firstp">Thanks for visiting.</p>
<p>Hey there.</p>
</body></html>类选择器不能使用HTML 保留的元素如heading，p，h1等等。你还可以通过用空格分开的方法对同一个元素使用多个类。列表D演示了使用多个类来风格化一个特定的段落。
<html>
<head><title>CSS – Class selectors</title>
<style type="text/css">
.fp { text-indent: 2em;margin: 1em; }
.fpf {color: red; font-face: arial; font-size: 16pt;}
p { margin: 1em; color: blue; }
</style><body>
<h1>Test Page</h1>
<p class="fp fpf">Thanks for visiting.</p>
<p>Hey there.</p>
</body></html>你可以将类选择器和类型选择器结合在一起使用，来风格化拥有分配的类的某些元素。在这个场景中，当定义样式时，元素名有一个由空格隔开的类名。列表E中的例子演示了这样的技巧，即仅拥有赋予的特定类名的段元素才风格化为某种方式，而拥有相同类名的头部风格化为另一种形式。我将会在使用元素的ID属性时，更详细的介绍。
<html>
<head><title>CSS – Type selectors</title>
<style type="text/css">p.fp { text-indent: 2em;margin: 1em; color: red; }
h1.fp {color: orange; font-face: arial; font-size:
20pt; font-weight: bold;}
p { margin: 1em; color: blue; }
</style><body>
<h1 class="fp">Test Page</h1>
<p class="fp">Thanks for visiting.</p>
<p>Hey there.</p>
</body></html>ID
类选择器可以让你风格化一组或一类元素，但是你还可以更具体的风格化页面中的元素。页面中的每个元素都有一个ID属性，这个ID在整个页面中是唯一的。ID可用于诸如JavaScript等脚本语言对于元素的操作，它还可以用于样式风格化。
当为一个特定的元素ID定义样式时，需要在样式定义中在ID前面添加数字符和（#）。这样来告诉系统只有拥有该ID的元素才可以应用这个样式。需要注意的是，因为ID号都是唯一的，所以样式可能仅使用一次，如列表F中的例子所示。（在本文的后面，我们将介绍样式也可以通过元素的属性使用）。
<html>
<head><title>CSS – ID selectors</title>
<style type="text/css">p.fp { text-indent: 2em;margin: 1em; color: red; }
#head1 {color: purple; font-face: arial;
font-size: 20pt; font-weight: bold; text-align: center;}
p { margin: 1em; color: blue; }
</style><body>
<h1 id="head1">Test Page</h1>
<p class="fp">Thanks for visiting.</p>
<p>Hey there.</p>
</body></html>在这种情况下，ID作为一个属性可以看到并被风格化，但是ID选择器总是比其它的属性选择器优先。在使用ID选择器风格化页面上的某个特定元素的同时，你还以通过页面内元素的上下文来定位任何风格化的元素。
在决定一个样式覆盖什么内容时，类选择器比类型选择器有更多的控制。由类选择器定义的样式可以用于具有类属性的所有元素，不管该元素在页面中的位置。它可以很好的控制那些元素接受样式。列表C中的例子演示了使用类只格式化页面中的第一段。所以第一段的是锯齿状的字体，而接下来的段落与此不同。
<html>
<head><title>CSS – Type selectors</title>
<style type="text/css">
.firstp { text-indent: 2em;margin: 1em; color: red; }
p { margin: 1em; color: blue; }
</style><body>
<h1>Test Page</h1>
<p class="firstp">Thanks for visiting.</p>
<p>Hey there.</p>
</body></html>类选择器不能使用HTML 保留的元素如heading，p，h1等等。你还可以通过用空格分开的方法对同一个元素使用多个类。列表D演示了使用多个类来风格化一个特定的段落。
<html>
<head><title>CSS – Class selectors</title>
<style type="text/css">
.fp { text-indent: 2em;margin: 1em; }
.fpf {color: red; font-face: arial; font-size: 16pt;}
p { margin: 1em; color: blue; }
</style><body>
<h1>Test Page</h1>
<p class="fp fpf">Thanks for visiting.</p>
<p>Hey there.</p>
</body></html>你可以将类选择器和类型选择器结合在一起使用，来风格化拥有分配的类的某些元素。在这个场景中，当定义样式时，元素名有一个由空格隔开的类名。列表E中的例子演示了这样的技巧，即仅拥有赋予的特定类名的段元素才风格化为某种方式，而拥有相同类名的头部风格化为另一种形式。我将会在使用元素的ID属性时，更详细的介绍。
<html>
<head><title>CSS – Type selectors</title>
<style type="text/css">p.fp { text-indent: 2em;margin: 1em; color: red; }
h1.fp {color: orange; font-face: arial; font-size:
20pt; font-weight: bold;}
p { margin: 1em; color: blue; }
</style><body>
<h1 class="fp">Test Page</h1>
<p class="fp">Thanks for visiting.</p>
<p>Hey there.</p>
</body></html>ID
类选择器可以让你风格化一组或一类元素，但是你还可以更具体的风格化页面中的元素。页面中的每个元素都有一个ID属性，这个ID在整个页面中是唯一的。ID可用于诸如JavaScript等脚本语言对于元素的操作，它还可以用于样式风格化。
当为一个特定的元素ID定义样式时，需要在样式定义中在ID前面添加数字符和（#）。这样来告诉系统只有拥有该ID的元素才可以应用这个样式。需要注意的是，因为ID号都是唯一的，所以样式可能仅使用一次，如列表F中的例子所示。（在本文的后面，我们将介绍样式也可以通过元素的属性使用）。
<html>
<head><title>CSS – ID selectors</title>
<style type="text/css">p.fp { text-indent: 2em;margin: 1em; color: red; }
#head1 {color: purple; font-face: arial;
font-size: 20pt; font-weight: bold; text-align: center;}
p { margin: 1em; color: blue; }
</style><body>
<h1 id="head1">Test Page</h1>
<p class="fp">Thanks for visiting.</p>
<p>Hey there.</p>
</body></html>在这种情况下，ID作为一个属性可以看到并被风格化，但是ID选择器总是比其它的属性选择器优先。在使用ID选择器风格化页面上的某个特定元素的同时，你还以通过页面内元素的上下文来定位任何风格化的元素。
#3楼发布者：tznktg时间：2007-09-21 17:38:06
祖先
CSS使得通过页面内元素间的关系风格化元素变得很简单。利用祖先选择器，你可以定位文档树之内的元素，它还可以让你选择直接或间接来自另一个元素的子孙元素。
例如，你可能想以某种方式风格化div元素内包含的有序列表。使用祖先选择器，你可以为页面内通过空格分开的元素指定一个路径。列表G中的例子只在粗体元素出现在段落元素之内时，才对它进行风格化。
<html>
<head><title>CSS – Type selectors</title>
<style type="text/css">
p {font-face: arial; font-size: 110%; color: red; background: yellow;}
p b {margin: 0; font-size: 150%; color: black; font-weight: normal; }
</style><body>
<h1>Test Page</h1>
<p>Hey there.</p>
<p>Here <b>are</b> the items.</p>
</body></html>孩子
孩子选择器与祖先选择器关系十分紧密，但是当你寻找的是具有直接祖先或子孙关系的元素时，它们会很明确。孩子选择器通过列出双亲元素来定义，孩子元素通过大于号隔开（>）。Windows IE浏览器5 ，5.5和6都不支持孩子选择器，但是他们被绝大部分符合标准的其它浏览器支持。列表H中的例子模仿前面的例子使用了孩子选择器与祖先选择器作对比。
列表H
<html>
<head><title>CSS 鈥" Type selectors</title>
<style type="text/css">
p {font-face: arial; font-size: 110%; color: red; background: yellow;}
p > b {margin: 0; font-size: 200%; color: black; font-weight: normal; }
</style><body>
<h1>Test Page</h1>
<p>Hey there.</p>
<p><b>are</b> the items.</p>
</body></html>
CSS使得通过页面内元素间的关系风格化元素变得很简单。利用祖先选择器，你可以定位文档树之内的元素，它还可以让你选择直接或间接来自另一个元素的子孙元素。
例如，你可能想以某种方式风格化div元素内包含的有序列表。使用祖先选择器，你可以为页面内通过空格分开的元素指定一个路径。列表G中的例子只在粗体元素出现在段落元素之内时，才对它进行风格化。
<html>
<head><title>CSS – Type selectors</title>
<style type="text/css">
p {font-face: arial; font-size: 110%; color: red; background: yellow;}
p b {margin: 0; font-size: 150%; color: black; font-weight: normal; }
</style><body>
<h1>Test Page</h1>
<p>Hey there.</p>
<p>Here <b>are</b> the items.</p>
</body></html>孩子
孩子选择器与祖先选择器关系十分紧密，但是当你寻找的是具有直接祖先或子孙关系的元素时，它们会很明确。孩子选择器通过列出双亲元素来定义，孩子元素通过大于号隔开（>）。Windows IE浏览器5 ，5.5和6都不支持孩子选择器，但是他们被绝大部分符合标准的其它浏览器支持。列表H中的例子模仿前面的例子使用了孩子选择器与祖先选择器作对比。
列表H
<html>
<head><title>CSS 鈥" Type selectors</title>
<style type="text/css">
p {font-face: arial; font-size: 110%; color: red; background: yellow;}
p > b {margin: 0; font-size: 200%; color: black; font-weight: normal; }
</style><body>
<h1>Test Page</h1>
<p>Hey there.</p>
<p><b>are</b> the items.</p>
</body></html>