3.2 CSS选择器-高二《Web前端开发-网页设计》同步精品课堂（电工版2023）

单元3 CSS基础 3.2 CSS选择器 PART 01 基本选择器 主要内容 CONTENTS PART 03 属性选择器 PART 02 组合选择器 PART 04 伪选择器 2 CSS基本选择器 选择器 说明 E 选择指定类型的网页元素 E#id 选择匹配E的元素，且匹配元素的id为“id”，E选择符可以省略。 E.class 选择匹配E的元素，且匹配元素的class属性值为“class”，E选择符可以省略。 * 选取所有元素。 【案例3.2.1】使用CSS基本选择器 基本选择器即简单选择器，主要是根据元素的名称、id、类来选择元素 CSS组合选择器 选择器 说明 E F 选择匹配F的元素，且该元素被包含在匹配E的元素内。 E > F 选择匹配F的元素，且该元素为所匹配E元素的子元素。 E + F 选择匹配F的元素，且该元素为所匹配E元素后面相邻的位置。 E ~ F 选择前面有E元素的每个F元素。 【案例3.2.2】使用CSS组合选择器 组合选择器是根据简单选择器之间的特定关系来选择元素的。组合选择器可以 包含多个简单选择器。元素的不同状态对元素进行选择。 CSS属性选择器 选择器 说明 E[foo] 选择匹配E的元素，且该元素定义了foo属性。E选择符可以省略，表示选择定义了foo属性的任意类型的元素。 E[foo="bar"] 选择匹配E的元素，且该元素foo属性值为“bar” E[foo~="bar"] 选择匹配E的元素，且该元素定义了foo属性，foo属性值是一个以空格符分隔的列表，列表中的一个值为“bar”。 E[foo|="en"] 选择匹配E的元素，且该元素定义了foo属性，foo属性值是一个用连字符（-）分隔的列表，值以“en”开头。 【案例3.2.3】使用CSS属性选择器 属性选择器是根据元素属性或属性值的情况来选择元素。元素的不同状态对元 素进行选择。 CSS伪选择器 选择器 说明 E:link 选择匹配E的元素，且匹配元素被定义了超链接并未被访问。 E:visited 选择匹配E的元素，且匹配元素被定义了超链接并已被访问。 E:active 选择匹配E的元素，且匹配元素被激活 E:hover 选择匹配E的元素，且匹配元素正被鼠标经过 E:focus 选择匹配E的元素，且匹配元素获取了焦点 E:first-child 选择匹配E的元素，且该元素为父元素的第一个子元素。 伪类选择器根据元素的不同状态对元素进行选择。 CSS伪选择器 选择器 说明 E::first-line 选择匹配E元素内的第一行文本 E::first-letter 选择匹配E元素内的第一个字符 E::before 在匹配E的元素前面插入内容 E::after 在匹配E的元素后面插入内容 【案例3.2.4】使用CSS伪类、伪元素选择器 伪元素选择器则用于选择并设置元素指定部分的样式。 感谢观看 $