
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 执行效果