Web应用开发技术与案例教程
上QQ阅读APP看书,第一时间看更新

2.5 CSS选择器

CSS通过选择器(Selector)来指定应用样式的HTML元素,CSS的灵活性很大程度上来自于选择器的灵活性,熟练且正确地使用合适的选择器是学好CSS的关键。本节将介绍几种常见的选择器。

2.5.1 类型选择器

类型选择器(Type Selectors)是最基本的选择器,它将匹配HTML文档中某一类型的全部元素,并应用相关的样式规则。其定义语法如下。

978-7-111-63649-6-Chapter02-18.jpg

例如:

978-7-111-63649-6-Chapter02-19.jpg

或:

978-7-111-63649-6-Chapter02-20.jpg

h1和p就是类型选择器,当使用此选择器时,样式声明将应用于该HTML文档中全部的h1元素和p元素。

2.5.2 类选择器

类选择器(Class Selectors)能匹配HTML文档中具有指定类名的全部元素,并应用相关的样式规则。其定义语法如下。

978-7-111-63649-6-Chapter02-21.jpg

例如:

978-7-111-63649-6-Chapter02-22.jpg

使用此选择器,样式声明将应用于HTML文档中所有类名为“text1”的元素。

在HTML中,可以为元素添加一个class的属性,其语法如下。

978-7-111-63649-6-Chapter02-23.jpg

例如:

978-7-111-63649-6-Chapter02-24.jpg

2.5.3 ID选择器

ID选择器(ID Selectors)能匹配HTML文档中具有指定ID的元素,并应用相关样式规则。其定义语法如下。

978-7-111-63649-6-Chapter02-25.jpg

例如:

978-7-111-63649-6-Chapter02-26.jpg

注意,在ID选择器前包含一个井号(#)。由于ID在HTML文档中必须是唯一的,因此ID选择器一次只能选中一个标签。在HTML中,可以为元素添加一个ID属性,其语法如下。

978-7-111-63649-6-Chapter02-27.jpg

例如:

978-7-111-63649-6-Chapter02-28.jpg