1.3 基本CSS选择器
选择器(selector)是CSS中很重要的概念，所有HTML语言中德标记样式都是通过不同的CSS选择器进行控制的。用户自尧通过选择器对不同的HTML标签进行选择，并赋予各种样式声明，即可实现各种效果。
为了理解选择器的概念，可以用“地图”作文类比。在地图上都可以看到一些“图例”，比如河流用蓝线表示，某公路用红线表示，等等。本质上就是一种内容与表现形式的对应关系。在网页上，也同样存在着这样的对应关系，例如h1标题用蓝文字表示，h2标题用红文字表示。因此为了使CSS规则与HTML元素对应起来，就必须定义一套完整的规则，实现CSS对HTML的“选择”。这就是叫“选择器”的原因。
在CSS中，有各种不同类型的选择，本节先介绍“基本”选择器。所谓“基本”，使相对于下一节中介绍的“复合”选择器而言的。也就是说“复合”选择器使通过对基本选择器进行组合而构成的。
基本选择器有标记选择器、类别选择器、和ID选择器3种，下面详细介绍。
学8SL网676页sh68网(www.xwangye)
1.3.1 标记选择器
一个HTML页面由很多不同的标记组成，CSS标记选择器用来声明哪些标记采用哪种CSS样式？因此，每一种HTML标记的名称都可以作为相应的标记选择器的名称。例如，p选择器就是用于声明页面中所有
标记的样式风格。同样可以通过h1选择器来声明页面种所有的h1标记的风格，如下所示：
<style>
h1{color:red;font-size:25px;}
</style>
学8SL网676页sh68网(www.xwangye)
以上这段CSS代码声明了HTML种所有h1标记。文字颜采用红，大小都为25px。每一个CSS选择器都半酣选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标记声明多种样式风格，如图1.6所示。

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

图1.7  类别选择器
例如，当页面同时出现3个<P>标记时，如果想让它们的颜各不相同，就可以通过设置不同的class选择器来实现。一个完整的案例如下所示：
学8SL网676页sh68网(www.xwangye)
<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>
学8SL网676页sh68网(www.xwangye)
<body>
<p class="red">class选择器1</p>
<p class="green">class选择器2</p>
<h3 class="green">h3同样适用</h3>
</body>
</html>
学8SL网676页sh68网(www.xwangye)
显示效果如图1.8所示。
学8SL网676页sh68网(www.xwangye)

图1.8  类别选择器示例
从图中可以看到两个<P>标记分别呈现出了不同的颜和字体大小，而且任何一个class选择器都适用于所有HTML标记，只需要用HTML标记的class属性声明即可，例如 <H3>标记同样适用了.green这个类别。
在上面的例子仔细观察还会发现，最后一行 <H3>标记显示效果为粗字，这时因为在没有定义字体的粗细属性的情况下，浏览器采用默认的显示方式， <P>默认为正常粗细， <H3>默认为粗字体。
再例如，很多时候页面中几乎所有的 <P>标记都使用同样的样式风格，只有1～2个特殊的 <P>标记需要使用不同的风格来突出，这时可以通过class选择器与1.3.1小节提到的标记选择器配合来实现。
学8SL网676页sh68网(www.xwangye)
<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>
学8SL网676页sh68网(www.xwangye)
<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>
学8SL网676页sh68网(www.xwangye)
首先通过标记选择器定义
标记的全局显示方案，然后再通过一个class选择器对需要突出的
标记进行单独设置，这样大大提高了代码编写的效率，显示效果如图1.9所示。
学8SL网676页sh68网(www.xwangye)

图1.9  两种选择器配合
在HTML的标记中，还可以同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运用到一个标记中。这在实际制作网站时往往会很有用，可以适当减少代码的长度，如下例所示。
学8SL网676页sh68网(www.xwangye)
<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>
学8SL网676页sh68网(www.xwangye)
<body>
<h4>一种都不使用</h4>
<h4 class="one">使用第一种</h4>
<h4 class="two">使用第二种</h4>
<h4 class="one two">同时使用两种</h4>
cssclass属性</body>
</html>
学8SL网676页sh68网(www.xwangye)
显示效果如图1.10所示，可以看到第一种class的第二行显示为蓝，而第3行则仍为黑，但是由于使用了.two，因此文字变大。第4行通过“class="one two"”将两个样式同时加入，得到蓝大字体。第1行没有使用任何样式，仅作为参考。
学8SL网676页sh68网(www.xwangye)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。