CSS 根本选择器
日期：2014-05-17 浏览次数：20717 次
CSS 基本选择器
在CSS的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称 —— 选择器（selector）。
选择器是CSS中很重要的概念，所有HTML语言中的标记样式都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行选择，并赋予各种样式声明，即可实现各种效果。
基本选择器有标记选择器、类别选择器和ID选择器3种，下面分别介绍。
1. 标记选择器
一个HTML页面由很多不同的标记组成，而CSS标记选择器就是声明哪些标记采用哪种CSS样式。因此，每一种HTML标记的名称都可以作为相应的标记选择器的名称。例如P选择器，就是用于声明页面中所有印>标记的样式风格。同样可以通过 h1 选择器来声明页面中所有的<h1>标记的CSS风格。例如下面这段代码：
以上这段CSS代码声明了HTML页面中所有的<h1>标记，文字的颜色都采用红色，大小都为25px。每一个CSS选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标记声明多种样式风格，如下图1所示。
![]()
如果希望所有<h1>标记不再采用红色，而是蓝色，这时仅仅需要将属性color的值修改为blue，即可全部生效。
CSS语言对于所有属性和值都有相对严格的要求。如果声明的属性在CSS规范中没有，或者某个属性的值不符合该属性的要求，都不能使该CSS语句生效。下面是一些典型的错误语句：
对于上面提到的这些错误，通常情况下可以直接利用CSS编辑器（如Dreamweaver或Expression Web）的语法提示功能避免，但某些时候还需要查阅CSS手册，或者直接登录W3C的官方网站（http://www.w3.org/）来查阅CSS的详细规格说明。
2. 类别选择器
在上一节中提到的标记选择器一旦声明，那么页面中所有的相应标记都会相应地产生变化。例如当声明了<p>标记为红色时，页面中所有的<p>标记都将显示为红色。如果希望其中的某一个<p>标记不是红色，而是蓝色，这时仅依靠标记选择器是不够的，还需要引入类别（class）选择器。
类别选择器的名称可以由用户自定义，属性和值跟标记选择器一样，也必须符合CSS规范，如图2所示。
![]()
例如当页面中同时出现3个<p>标记，并且希望它们的颜色各不相同，就可以通过设置不同的class选择器来实现。一个完整的案例如下所示，实例文件源码如下：
其显示效果如图3所示，可以看到3个<p>标记分别呈现出了不同的颜色以及字体大小。任何一个class选择器都适用于所有HTML标记，只需要用HTML标记的class属性声明即可，例如<h3>标记同样使用了.green这个类别。
![]()
3. ID选择器
ID选择器的使用方法跟class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此其针对性更强。在HTML的标记中只需要利用id属性，就可以直接调用CSS中的ID选择器，其格式如图1所示。下面举一个实际案例，示例文件如下：
![]()
显示效果如图2所示，可以看到第2行与第3行都显示了CSS的方案，换句话说在很多浏览器下，ID选择器也可以用于多个标记。但这里需要指出的是，将ID选择器用于多个标记是错误的，因为每个标记定义的id不只是CSS可以调用，JavaScript等其他脚本语言同样也可以调用。如果一个HTML中有两个相同id的标记，那么将会导致JavaScript在查找id时出错，例如函数getElementByld()。
![]()
正因为JavaScript等脚本语言也能调用HTML中设置的id，因此ID选择器一直被广泛地使用。网站建设者在编写CSS代码时，应该养成良好的编写习惯，一个id最多只能赋予一个HTML标记。
另外从图2中还可以看到，最后一行没有任何CSS样式风格显示，这意
在CSS的3个组成部分中，“对象”是很重要的，它指定了对哪些网页元素进行设置，因此，它有一个专门的名称 —— 选择器（selector）。
选择器是CSS中很重要的概念，所有HTML语言中的标记样式都是通过不同的CSS选择器进行控制的。用户只需要通过选择器对不同的HTML标签进行选择，并赋予各种样式声明，即可实现各种效果。
基本选择器有标记选择器、类别选择器和ID选择器3种，下面分别介绍。
1. 标记选择器
一个HTML页面由很多不同的标记组成，而CSS标记选择器就是声明哪些标记采用哪种CSS样式。因此，每一种HTML标记的名称都可以作为相应的标记选择器的名称。例如P选择器，就是用于声明页面中所有印>标记的样式风格。同样可以通过 h1 选择器来声明页面中所有的<h1>标记的CSS风格。例如下面这段代码：
<style>
h1 {
color: red;
font-size: 25px;
}
</style>
以上这段CSS代码声明了HTML页面中所有的<h1>标记，文字的颜色都采用红色，大小都为25px。每一个CSS选择器都包含选择器本身、属性和值，其中属性和值可以设置多个，从而实现对同一个标记声明多种样式风格，如下图1所示。
图1 CSS标记选择器
如果希望所有<h1>标记不再采用红色，而是蓝色，这时仅仅需要将属性color的值修改为blue，即可全部生效。
CSS语言对于所有属性和值都有相对严格的要求。如果声明的属性在CSS规范中没有，或者某个属性的值不符合该属性的要求，都不能使该CSS语句生效。下面是一些典型的错误语句：
Head-height: 48px; /* 非法属性 */ color: ultraviolet; /* 非法值 */
对于上面提到的这些错误，通常情况下可以直接利用CSS编辑器（如Dreamweaver或Expression Web）的语法提示功能避免，但某些时候还需要查阅CSS手册，或者直接登录W3C的官方网站（http://www.w3.org/）来查阅CSS的详细规格说明。
2. 类别选择器
在上一节中提到的标记选择器一旦声明，那么页面中所有的相应标记都会相应地产生变化。例如当声明了<p>标记为红色时，页面中所有的<p>标记都将显示为红色。如果希望其中的某一个<p>标记不是红色，而是蓝色，这时仅依靠标记选择器是不够的，还需要引入类别（class）选择器。
类别选择器的名称可以由用户自定义，属性和值跟标记选择器一样，也必须符合CSS规范，如图2所示。
图2 类别选择器
例如当页面中同时出现3个<p>标记，并且希望它们的颜色各不相同，就可以通过设置不同的class选择器来实现。一个完整的案例如下所示，实例文件源码如下：
<html>
<head>
<title>class选择器</title>
<style type="text/css">
.red{
color:red; /* 红色 */
font-size:18px; /* 文字大小 */
}
.green{
color:green; /* 绿色 */
font-size:20px; /* 文字大小 */
}
</style>
</head>
<body>
<p class="red">class选择器1</p>
<p class="green">class选择器2</p>
<h3 class="green">h3同样适用</h3>
</body>
</html>其显示效果如图3所示，可以看到3个<p>标记分别呈现出了不同的颜色以及字体大小。任何一个class选择器都适用于所有HTML标记，只需要用HTML标记的class属性声明即可，例如<h3>标记同样使用了.green这个类别。
图3 类别选择器示例
3. ID选择器
ID选择器的使用方法跟class选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此其针对性更强。在HTML的标记中只需要利用id属性，就可以直接调用CSS中的ID选择器，其格式如图1所示。下面举一个实际案例，示例文件如下：
<html>
<head>
<title>ID选择器</title>
<style type="text/css">
#bold {
font-weight:bold; /* 粗体 */
}
#green {
font-size:30px; /* 字体大小 */
color:#009900; /* 颜色 */
}
</style>
</head>
<body>
<p id="blod">ID选择器1</p>
<p id="green">ID选择器2</p>
<p id="green">ID选择器3</p>
<p id="bold green">ID选择器4</p>
</body>
</html>图4 ID选择器
显示效果如图2所示，可以看到第2行与第3行都显示了CSS的方案，换句话说在很多浏览器下，ID选择器也可以用于多个标记。但这里需要指出的是，将ID选择器用于多个标记是错误的，因为每个标记定义的id不只是CSS可以调用，JavaScript等其他脚本语言同样也可以调用。如果一个HTML中有两个相同id的标记，那么将会导致JavaScript在查找id时出错，例如函数getElementByld()。
图5 ID选择器示例
正因为JavaScript等脚本语言也能调用HTML中设置的id，因此ID选择器一直被广泛地使用。网站建设者在编写CSS代码时，应该养成良好的编写习惯，一个id最多只能赋予一个HTML标记。
另外从图2中还可以看到，最后一行没有任何CSS样式风格显示，这意
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
