浅析CSS的选择器基础语法规则和工作原理

茆荣海

【摘 要】层叠样式表（CSS）是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言，选择器是CSS语法中最基本概念。本文浅析了CSS中选择器的基础语法规则和工作原理。

【关键词】CSS 选择器 基础语法规则 工作原理

一、引言

CSS是层叠样式表（Cascading Style Sheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术，是网页设计者必须掌握的技术之一。在HTML文档中加入CSS样式表可分为嵌入式样式表、外部样式表和内联样式表三种，在同一文档内可以同时使用三种方法。

二、CSS选择器的基础语法规则

选择器是CSS语法中最重要最基本的概念。使用选择器可以指定XHTML文档中特定标签应用CSS样式。选择器有许多类型，包括标签选择器、类选择器、ID选择器、全局选择器、组合选择器、继承选择器和伪类选择器等。

（一）标签选择器。一个XHTML文档中有许多标签，例如p标签、h1标签等。若要使文档中的所有p标签都使用同一个CSS样式，就应使用标签选择器。如代码“h1 {color：red； font-size：14px；}”，这行代码的作用是将 h1元素内的文字颜色定义为红色，同时将字体大小设置为14像素。在这个例子中，h1是选择器，color和 font-size是属性，red和14px是值。标签选择器可以直接改变该标签的所有样式。

（二）类选择器。使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式，但是在实际运用中，XHTML文档中的同一个标签会被反复使用，若要为相同的标签赋予不同的CSS样式就应使用类选择器。以下是使用类选择器定义CSS样式的步骤：（1）编写合适的类选择器名，然后定义CSS样式声明，例如定义类选择器名为news的CSS样式代码.news{ font-size：20px；color：green }。（2）把以news为名的CSS样式应用到XHTML某个指定的标签中。将news样式指定给标签的方法如下：新闻，其中，在

中写入class=“news”的语句。Class和等号都是固定的写法，在双引号中写入类选择器的名称。

（三）ID选择器。ID选择器和类选择器相似，不同的是，ID选择器不能复用。在一个XHTML文档中，一个ID选择器只能把其CSS样式指定给一个标签。以下是使用ID选择器定义CSS样式的步骤：（1）编写合适的类选择器名，然后定义CSS样式声明，以下是定义类选择器名为special的CSS样式代码：#special{ font-size：20px；color：green }。（2）把以special为名的CSS样式应用到XHTML某个指定的标签中。将news样式指定给标签的方法如下：