1.6 选择器

选择器种类很多，学习一些常用的标签即可，如下所示。

1）标签选择器。

2）类选择器。

3）ID选择器。

4）全局选择器。

5）属性选择器。

6）包含选择器。

不同的资料对其称呼可能不同，但是使用方法基本一样。

1.6.1 标签选择器

下面有一段很基础的html代码（案例文件：CSS/1.html），如下所示。

运行结果如图1-44所示。

从运行结果中可以发现，每一个段落都在一对<p></p>标签中，如果想设置颜色和字体居中等，逐个去修改就太麻烦了。这里可以使用CSS中的标签选择器，一般将它放到head的<style></style>标签中。

•图1-44 运行结果

案例：将上面的一段HTML字体位置设置为居中，颜色设置为红色，只需要在<head></head>中添加如下标签内容即可。

补充说明：

1）p是CSS中的选择器，它指向的是p标签。

2）color是颜色属性，red是它的属性值，也可以尝试修改为别的值。

3）text-align是文本位置属性，值为center表示居中。

这样就能实现所有<p>标签的调整，修改效果如图1-45所示。

•图1-45 修改效果

完整代码如下所示（案例文件：CSS/1.html）。

1.6.2 类选择器

前文使用标签选择器实现了所有相同名称的标签修改样式，如果只需要修改其中一部分的样式呢？这里就要用到类选择器了。

如果只想修改某个标签，这个标签必须有特定的class元素。在class名称前加点，表示只对class为特定某个名称的标签进行修改。例如下面例子所示，对class为test的p标签进行修改，而class为test2的p标签并没有修改（案例文件：CSS/2.html）。

修改效果如图1-46所示。

•图1-46 修改效果

1.6.3 ID选择器

和类选择器的用法基本相同，区别在于：ID选择器最好在同一个页面中只使用一次。修改id需要在开头添加#号，后跟该元素的id值，比如下面的例子对id值为special的标签修改为红色居中（案例文件：CSS/3.html）。

执行效果如图1-47所示。

•图1-47 执行效果

1.6.4 全局选择器

如果想要对所有标签做相同的修改，只需要用*号来选择即可。比如下面这段代码，不管它是class还是id，统一修改为红色居中（案例文件：CSS/4.html文件）。

执行效果如图1-48所示。

•图1-48 执行效果

1.6.5 属性选择器

属性选择器可以根据元素的属性及属性值来选择。它的基本语法有如下类似形式。

1）形式1。

2）方式2。

案例1：将<p>标签中包含class的元素对应的内容修改为蓝色且居中，案例代码如下。

效果如图1-49所示。

•图1-49 案例1执行效果

案例2：将<p>标签中class属性且属性值为bold的内容修改为蓝色且居中（案例文件：CSS/5.html），案例代码如下。

执行效果如图1-50所示。

•图1-50 案例2执行效果

1.6.6 包含选择器

包含选择器适用于稍微复杂一点的网页，因为一般的标签不会全部直接堆积在<body></body>中，在<body></body>中也有可能是分开管理的。

包含选择器的基本语法为：

案例：修改</div>标签中<p>标签的颜色为红色且居中（案例文件：CSS/6.htlml），案例代码如下。

执行效果如图1-51所示。

•图1-51 执行效果

1.6.7 选择器的综合使用

如果将前面的选择器放到一起使用，这样就能将不同的标签修改为不同的样式。案例：标签、类、id、全局、属性，包含选择器的综合使用（案例文件：CSS/7.html），案例代码如下。

执行效果如图1-52所示。

•图1-52 执行效果

上一章目录下一章