揭秘CSS(第 1 版)
2.2.1 元素选择器
阅读(

概述

CSS选择器

概述

基本选择器

基本选择器是CSS中使用最频繁、最基础,也是CSS中最早定义的选择器。基本选择器包括元素选择器、类选择器、id选择器、群组选择器、通配选择器。

表 2-1 基本选择器
选择器语法功能描述版本
元素选择器E选择指定类型的元素1
类选择器E.class选择类型为E,且class属性值包含指定类名的元素1
id选择器E#id选择类型为E,且id属性值为指定id的元素1
群组选择器E, F同时选择所有E元素或F元素,E和F之间用逗号隔开1
通配选择器*选择所有元素2

表中,使用E.class或E#id这种方式声明的选择器,称作交集选择器,它由两个选择器直接连接构成,其结果是选中两个选择器所匹配的交集。

其中,第一个选择器必须是元素选择器,第二个选择器必须是类选择器或 id 选择器。第一个选择器和第二个选择器之间没有空格,连续书写。如:

ul.nav { … }

上述规则,首先,只选择ul元素,而不选择其它类型的元素。其次,ul元素的class属性值还必须是nav。

如果省略了第一个选择器,则就变成了普通的类选择器,会选择 class 属性值包含指定类名的任何元素。

说明:

本表及后文的关系选择器、属性选择器、伪元素选择器、伪类选择器的表格中提到的E元素、F元素,都是广义的概念,E、F 既可以是HTML元素本身(如 p、h1 等),也可以是任意的CSS选择器(如 p.red、div > .red、#red、ul li:hover 等),因为任何选择器得到的结果,最终都是HTML元素。

元素选择器

一个完整的HTML页面是由很多不同的元素组成。元素选择器,是直接使用HTML元素的名称作为选择器(如 html、p、h1、em、a、img等)。由于使用元素的名称作为选择器,在W3C标准中,又把元素选择器称为类型选择器、标签选择器。

元素选择器匹配该类型的元素,并匹配DOM树中该类型元素的每一个实例,并为它们应用样式。如:

p { color: black; }
h1 { font-size: 14px; }

上述规则将匹配文档中所有的 p 元素和 h1 元素,为它们应用样式。应用上述样式后,文档中的所有段落文本为黑色,所有 h1 标题字体大小为 14px。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验