web前端开发基础3.1

CSS的基本语法由选择器、属性和属性的值构成，如：

p{

font-size:12px;

color: red;

align: center;

}

属性及其值比较简单，相信在之前讲过的HTML中你也知道一些，那选择器是什么？它包含哪些种类？这些问题是这篇文章需要探讨的。

CSS选择器

在CSS中，选择器就是用于选择需要添加样式的对象的一种匹配模式。内联式选择器不需要选择器，内部式和外链式则需要选择器。CSS有四大类选择器，包括基本选择器、复合选择器、属性选择器和伪类选择器，今天先讲前两种。

基本选择器

基本选择器中又包括类选择器、ID选择器、标签（元素）选择器和通用选择器。

1.类选择器

特点：可灵活应用于一类元素中的个别几个，可重复使用；

定义方法：.类的名称

调用方法：class="类的名称"

例如，用类选择器将第1段文字变成红色，将第3段段落字体改为Times New Roman：

结果如图所示：

类选择器可以分组，将多个选择器的共性统一起来。

格式：.a1,.a2,.a3

例如，将 p 标签中的内容设置成字体和字号一致但颜色不同的段落文本：

结果如图所示：

2.ID选择器

特点：类似于类选择器，但只可应用于一类元素中的一个，必须唯一，且不可以有空格，故不能结合其他选择器使用；

定义方法：#ID名称

调用方法：id="ID名称"

例如，把上面例子转换成id选择器：

3.标签选择器

特点：用于一类元素，可以实现统一修改元素格式；

定义方法：标签名称

调用方法：无需调用

例如，把上面的例子上加上让段落的字号全部为20px的标签选择器：

结果是所有p标签中的元素字体都变大了：

4.通用选择器

特点：选择HTML页面上所有元素，可以被类选择器、ID选择器和标签选择器覆盖。

定义方法：*

调用方法：无需调用

例如，将上面例子的第二和第三行段落变成蓝色（第一行的段落被类选择器覆盖）：

结果如图：

实际中，一般不会使用该选择器，因为它会对页面上的所有元素的样式进行渲染，使速度变慢。

复合选择器

1.后代选择器

后代选择器又称包含选择器。

格式：a1 a2

特点：可以隔代作用，也就是说作用的标签不一定是相邻的，可能 a2 还包含在其他标签中。

例如，将 ul 标签中的 em 标签中的字体颜色变为红色：

结果如图。看！无论中间隔了多少层标签，后代选择器还是能达到那个地方。

2.父子选择器

父子选择器与后代选择器不同，它只会选择某个元素中特定的标签。

格式：a1>a2

特点：不能隔代作用，即作用的标签一定是相邻的。

例如，将 div 标签中的 p 标签中的字体颜色变为蓝色：

结果如下。除了和

相邻的

，其他位置的段落都不会改变。

3.相邻选择器

相邻选择器是指选择有相同的父标签且相邻的标签。

格式：a1 a2

特点：仅作用于下一个标签。

例如，将 h3 标签下的 p 标签中的字体变为粗体：

4.兄弟选择器

相邻选择器是指选择有相同的父标签且相邻的标签。

格式：a1~a2

特点：作用于一个标签下的所有指定标签。

例如，将上述 h3 标签下的 p 标签中的字体颜色全变为蓝色：

结语

基本选择包括类选择器、id选择器、标签选择器和通用选择器。复合选择器有后代选择器、父子选择器、相邻选择器和兄弟选择器。这两类选择器是非常常用的选择器，一定要掌握。