1.3 基本CSS选择器

选择器(selector)是CSS中很重要的概念，所有HTML语言中德标记样式都是通过不同的CSS选择器进行控制的。用户自尧通过选择器对不同的HTML标签进行选择，并赋予各种样式声明，即可实现各种效果。
为了理解选择器的概念，可以用“地图”作文类比。在地图上都可以看到一些“图例”，比如河流用蓝色线表示，某公路用红色线表示，等等。本质上就是一种内容与表现形式的对应关系。在网页上，也同样存在着这样的对应关系，例如h1标题用蓝色文字表示，h2标题用红色文字表示。因此为了使CSS规则与HTML元素对应起来，就必须定义一套完整的规则，实现CSS对HTML的“选择”。这就是叫“选择器”的原因。
在CSS中，有各种不同类型的选择，本节先介绍“基本”选择器。所谓“基本”，使相对于下一节中介绍的“复合”选择器而言的。也就是说“复合”选择器使通过对基本选择器进行组合而构成的。
基本选择器有标记选择器、类别选择器、和ID选择器3种，下面详细介绍。

学tq网R2页rW网(http://www.xwangye.com)


1.3.1 标记选择器

一个HTML页面由很多不同的标记组成，CSS标记选择器用来声明哪些标记采用哪种CSS样式？因此，每一种HTML标记的名称都可以作为相应的标记选择器的名称。例如，p选择器就是用于声明页面中所有

标记的样式风格。同样可以通过h1选择器来声明页面种所有的h1标记的风格，如下所示：

<style>
h1{color:red;font-size:25px;}
</style>

学tq网R2页rW网(http://www.xwangye.com)

以上这段CSS代码声明了HTML种所有h1标记。文字颜色采用红色，大小都为25px。每一个CSS选择器都半酣选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标记声明多种样式风格，如图1.6所示。


图1.6　CSS标记选择器


1.3.2 类别选择器

在1.3.1小节中提到的标记选择器一旦声明，那么页面中所有的该标记都会相应的残生变化。例如当声明了<P>标记为红色时，页面中所有的<P>标记都将显示为红色。但是如果希望其中的某一个<P>标记不是红色，而是蓝色，仅依靠标记选择器时不够的，还需要引入类别(class)选择器。
类别选择器的名称可以由用户自定义，属性和值跟标记选择器一样，也必须复合CSS规范，如图1.07所示。

学tq网R2页rW网(http://www.xwangye.com)



图1.7　　类别选择器

例如，当页面同时出现3个<P>标记时，如果想让它们的颜色各不相同，就可以通过设置不同的class选择器来实现。一个完整的案例如下所示：

学tq网R2页rW网(http://www.xwangye.com)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>class选择器</title>
<style type="text/css">
.red{ color:red; font-size:18px;}
.green{ color:green; font-size:20px;}
</style>
</head>

学tq网R2页rW网(http://www.xwangye.com)

<body>
<p class="red">class选择器1</p>
<p class="green">class选择器2</p>
<h3 class="green">h3同样适用</h3>
</body>
</html>

学tq网R2页rW网(http://www.xwangye.com)

显示效果如图1.8所示。

学tq网R2页rW网(http://www.xwangye.com)



图1.8　　类别选择器示例

从图中可以看到两个<P>标记分别呈现出了不同的颜色和字体大小，而且任何一个class选择器都适用于所有HTML标记，只需要用HTML标记的class属性声明即可，例如 <H3>标记同样适用了.green这个类别。
在上面的例子仔细观察还会发现，最后一行 <H3>标记显示效果为粗字，这时因为在没有定义字体的粗细属性的情况下，浏览器采用默认的显示方式， <P>默认为正常粗细， <H3>默认为粗字体。
再例如，很多时候页面中几乎所有的 <P>标记都使用同样的样式风格，只有1～2个特殊的 <P>标记需要使用不同的风格来突出，这时可以通过class选择器与1.3.1小节提到的标记选择器配合来实现。

学tq网R2页rW网(http://www.xwangye.com)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>class选择器与标记选择器</title>
<style type="text/css">
p{ color:blue; font-size:18px;}
.special{ color:red; font-size:23px;}
</style>
</head>

学tq网R2页rW网(http://www.xwangye.com)

<body>
<p>class选择器与标记选择器1</p>
<p>class选择器与标记选择器2</p>
<p>class选择器与标记选择器3</p>
<p class="special">class选择器与标记选择器4</p>
<p>class选择器与标记选择器5</p>
<p>class选择器与标记选择器6</p>
</body>
</html>

学tq网R2页rW网(http://www.xwangye.com)

首先通过标记选择器定义

标记的全局显示方案，然后再通过一个class选择器对需要突出的

标记进行单独设置，这样大大提高了代码编写的效率，显示效果如图1.9所示。

学tq网R2页rW网(http://www.xwangye.com)



图1.9　　两种选择器配合

在HTML的标记中，还可以同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运用到一个标记中。这在实际制作网站时往往会很有用，可以适当减少代码的长度，如下例所示。

学tq网R2页rW网(http://www.xwangye.com)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>同时使用两个class</title>
<style type="text/css">
.one{ color:blue;}
.two{ font-size:22px;}
</style>
</head>

学tq网R2页rW网(http://www.xwangye.com)

<body>
<h4>一种都不使用</h4>
<h4 class="one">使用第一种</h4>
<h4 class="two">使用第二种</h4>
<h4 class="one two">同时使用两种</h4>
</body>
</html>

学tq网R2页rW网(http://www.xwangye.com)

显示效果如图1.10所示，可以看到第一种class的第二行显示为蓝色，而第3行则仍为黑色，但是由于使用了.two，因此文字变大。第4行通过“class="one two"”将两个样式同时加入，得到蓝色大字体。第1行没有使用任何样式，仅作为参考。

学tq网R2页rW网(http://www.xwangye.com)



图1.10　　同时使用两种CSS风格


1.3.3 ID选择器

学tq网R2页rW网(http://www.xwangye.com)


ID选择器的使用方法与class选择器基本相同；不同之处在于ID选择器只能在HTML页面中使用一次，因此针对性更强。在HTML的标记中只需要利用id属性，就可以直接调用CSS中的ID选择器，其格式如图1.11所示。

学tq网R2页rW网(http://www.xwangye.com)



图1.11　ID选择器

下面举一个实际案例

学tq网R2页rW网(http://www.xwangye.com)

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>ID选择器</title>
<style type="text/css">
#one{ font-weight:blod;}
#two{ font-size:30px;
color:#009900;}</style>
</head>

学tq网R2页rW网(http://www.xwangye.com)

<body>
<p id="one">ID选择器1</p>
<p id="two">ID选择器2</p>
<p id="two">ID选择器3</p>
<p id="one two">ID选择器4</p>
</body>
</html>

学tq网R2页rW网(http://www.xwangye.com)


学tq网R2页rW网(http://www.xwangye.com)

显示效果如图1.12所示，第2行与第3行都显示的CSS的方案。可以看出，在很多浏览器下，ID选择器可以用于多个标记，即每个标记定义的id不只是CSS可调用，JavaScript等其他脚本语言同样也可以调用、因为这个特性，所以不要将ID选择器用于多个标记，否则会出现意想不到的错误。如果一个HTML中有两个相同的id标记，那么将会导致JavaScript在查找id时出错，例如函数getElementById().
正因为JavaScript等脚本语言也能调用HTML中设置的id,所以ID选择器一直被广泛的使用。网站建设者在编写CSS代码时，应该养成良好的编写习惯，一个id最多只能赋予一个HTML标记。
另外从图1.12可以看到，最后一行没有任何CSS样式风格显示，这意味着ID选择器不支持像class选择器那样的多风格同时使用，类似“id="one two"”这样的写法是完全错误的语法。

学tq网R2页rW网(http://www.xwangye.com)



图1.12　　ID选择器示例