1.3.1　CSS选择器入门

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

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

1．通用选择器

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

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

图1-9　HTML渲染效果

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

2．标签选择器

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

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

3．类选择器

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

4．id选择器

id选择器和类选择器类似，id选择器会通过标签的id属性进行选择，其使用格式为“#idName”。

示例如下：

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

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

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

可以使用后代选择器：

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

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