免费教程
选择器由 HTML 元素的 id、class 属性或元素名本身以及一些特殊符号构成,用来指定要为哪个 HTML 元素定义样式。
Web前端教程
Web前端入门教程:CSS选择器(上)
来源:易牛云朗沃
  |  
发布时间:2021-09-28 23:16
  |  
关键词:成都Web前端开发
  |  
阅读量:

选择器由 HTML 元素的 id、class 属性或元素名本身以及一些特殊符号构成,用来指定要为哪个 HTML 元素定义样式。选择器是 CSS 样式规则中重要的组成部分,我们可以将选择器看作是 CSS 样式与 HTML 元素之间的匹配模式,与选择器关联的样式规则会应用于选择器所指定的 HTML 元素上。CSS 中提供了多种不同类型的选择器,您可以根据自己的喜好来选择使用。

本节我们来介绍一下 CSS 中几种常用选择器的定义方式:

1. 通用选择器

通用选择器用星号*表示,它不匹配某个特定的 HTML 元素,而是匹配 HTML 文档中的每个元素。在开发中,我们通常使用通用选择器来清除 HTML 元素中默认的内外边距,如下所示:

成都Web前端开发

注意:虽然通用选择器内的样式规则能够应用于 HTML 文档中的每个元素,但并不建议在生产环境中过于频繁地使用通用选择器。正是因为通用选择器会匹配网页上每个元素的特点,频繁的使用会给浏览器带来太多不必要的压力。

2. 标签选择器

一个完整的 HTML 文档由各式各样的标签组成,而标签选择器可以通过具体的标签名称来匹配文档内所有同名的标签,如下所示:

成都Web前端开发

p选择器能够匹配文档中所有的<p>标签。

3. ID 选择器

ID 选择器用来匹配 HTML 文档中具有指定 ID 属性的标签,ID 选择器的定义需要用到井号#,后面紧跟 ID 属性的值,如下所示:

成都Web前端开发

#nav选择器能够匹配文档中具有id="nav"属性的标签。

4. 类选择器

类选择器可以根据标签的 class 属性匹配具体的 HTML 标签,所有符合条件的标签都会根据选择器内的样式进行格式化。类选择器的定义需要用到一个英文的句号.,后面紧跟 class 属性的值,如下所示:

成都Web前端开发

.black选择器能够匹配文档中所有具有class="black"属性的标签。

由于 class 属性不是唯一的,可以应用于不同的标签,因此您还可以在定义类选择器时指定具体的标签,如下所示:

成都Web前端开发

p.black选择器仅会将其中的样式应用到所有具有class="black"属性的<p>标签中,对于其它的具有class="black"属性的标签则没有影响。

另外,一个 HTML 标签中 class 属性可能不止一个,例如:

成都Web前端开发

假如我们要为所有 class 属性包含 info 的元素设置粗体,为所有 class 属性包含 selected 的元素设置红色字体,为 class 属性中既包含 info 又包含 selected 的元素设置蓝色背景,则可以写成下面这样:

成都Web前端开发

这种由多个 class 属性值所组成的类选择器我们可以称之为“多类选择器”,而前面介绍的由单个 class 属性值定义的类选择器可以称为“单类选择器”。

注意:多类选择器中,多个 class 属性之间是紧挨着的(例如 .info.selected),不需要使用空格分开。

5. 后代选择器

当一个<p>标签嵌套在一个<div>标签内部的时候,就可以将这个<p>标签看作是<div>标签的后代。当我们需要选择一个标签的后代标签时,就可以使用后代选择器。后代选择器的定义方式就是将标签名、class 属性或 id 属性等按照标签的嵌套关系由外到内的依次罗列,中间使用空格分开,如下所示:

成都Web前端开发

ul li a选择器仅会匹配无序列表<ul>标签的所有后代<a>标签。

点击知道更多编程知识

文章来源于网络