细说CSS选择器（上）

来源：互联网发布：高校学生选课系统源码编辑：程序博客网时间：2024/05/17 22:32

选择器是CSS中很重要的概念，所有HTML语言中的标记样式都要通过不同的CSS选择器进行控制。用户只需要通过选择器对不同的HTML标签进行选择，并赋予各种样式声明，即可实现各种效果。

我们可简单地将CSS的选择器分为“基本”选择器与“复合”选择器两种：

一，“基本”选择器

这类选择器可以分为三种：标记选择器、类别选择器、ID选择器

1，标记选择器

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

例：我们用h1选择器来声明页面中所有的<h1>标记的CSS风格：

Code:

2，类别选择器

上面提到要标记选择器一旦声明，那么页面中所有的该标记都会相应地产生变化。例如，若当声明了<p>标记为红色时，页面中所有的<p>标记都会显示为红色。但如果希望其中某一个<p>标记不是红色，而是蓝色，仅依靠标记选择器是不够的，还需要引入类别（class）选择器。

类别选择器的名称可以由用户自定义，属性和值跟标记选择器一样，也必须符合CSS规范。

Code:

下面我们通过一个实例来说明类别选择器的用法与作用：

页面中同时出现了3个<p>标记，如果想让它们的颜色各不相同，就可以通过设置不同的class选择器来实现。

Code:

其显示效果为：两个<p>标记分别呈现不两同的颜色和字体大小，而且任何一个class选择器都选用于所有的HTML标记，只需要用HTML标记的class属性声明即可，例如<h3>标记同样使用了.green这个类别。

在很多时候页面中几乎所有的<p>标记或<hn>标记都使用相同的样式风格，只有1~2个特殊的<p>或<hn>标记需要使用不同的风格来突出，这时我们可以先用标记选择器做全局的样式定义，再通过class选择器，对需要特殊显示的作类别标记即可。

另外，在HTML的标记中，还可以同时给一个标记运用多个class类别选择器，从而将两个类别的样式风格同时运用到一个标记中。

如下面的例子：

Code:

3，ID选择器

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

Code:

下面用一个例子来说明ID选择器的用法：

Code:

从显示效果中可以看出，第2行与第3行都显示了CSS方案，可以看出，很多的浏览器下，ID选择器可以用于多个标记。

但是每个标记定义的ID不只是CSS可以调用，JavaScript等其他脚本语言也可以调用，所以在使用时不要将ID选择器用于多个标记，否则会出现意想不到的错误，如果一个HTML中有两个相同的id标记，那么会导致JavaScrpt在查找id时出现错误。

而且我们两同时可以看到，最后一行没有任何CSS样式风格显示，这意味着ID选择器不支持像class选择器那样的多风格同时使用，类似”id=one two“这样的写法是完全错误的。