1.3.1　CSS选择器入门

CSS代码的语法规则主要由两部分构成：选择器和声明语句。

声明语句用来定义样式，而选择器则用来指定要使用当前样式的HTML元素。在CSS中，基本的选择器有通用选择器、标签选择器、类选择器和id选择器。

1.通用选择器

使用*号来定义通用选择器，通用选择器的意义是对所有元素生效。创建一个名为selector.html的文件，在其中编写如下示例代码：

【代码片段1-7　源码见附件代码/第1章/3.selector.html】

运行代码，浏览器渲染效果如图1-9所示。

如以上代码所示，使用通用选择器将HTML文档中所有的元素选中，之后将其内所有的文本字体都设置为粗体18号。

2.标签选择器

顾名思义，标签选择器可以通过标签名对此标签对应的所有元素的样式进行设置，示例代码如下：

【代码片段1-8】

上面的代码将所有p标签内部的文本颜色设置为红色。

3.类选择器

类选择器需要结合标签的class属性来使用，可以在标签中添加class属性来为其设置一个类名，类选择器会将所有设置对应类名的元素选中，类选择器的使用格式为“.className”。

4.id选择器

id选择器和类选择器类似，id选择器可以通过标签的id属性进行选择，其使用格式为“#idName”，示例如下：

【代码片段1-9　源码见附件代码/第1章/3.selector.html】

运行上面的代码，可以看到“段落一”的文本被渲染成红色，“段落二”的文本被渲染成绿色，“段落三”的文本被渲染成蓝色。

除上面列举的4种基本的CSS选择器外，CSS选择器还支持组合和嵌套，例如要选中如下代码中的p标签：

     <div><p>div中嵌套的p</p></div>

可以使用后代选择器如下：

对于要同时选中多种元素的场景，也可以将各种选择器组合，每种选择器间使用逗号分隔即可，例如：

此外，CSS选择器还有属性选择器、伪类选择器等，有兴趣的读者可以在互联网上查到大量的相关资料进行学习。本小节只需要掌握基础的选择器的使用方法即可。