HTML5+CSS3程序设计第8章CSS3中的选择器.pptVIP

* CSS中的选择器 04 伪类选择器及伪元素 02 基础选择器 03 其他选择器 01 选择器概述 选择器概述 1 选择器概述 选择器 CSS Web 设计需求 选择器概述 选择器 类型 说明 E{…} 元素选择器 指定该CSS样式对所有E元素起作用 E#myid ID选择器 选择匹配E的元素，且匹配元素的id属性值等于myid。注意，E选择符可以省略，表示选择指定id属性值等于myid的任意类型的元素 E.warning 类选择器 选择匹配E的元素，且匹配元素的class属性值等于warning。注意，E选择符可以省略，表示选择指定class属性值等于warning的任意类型的任意多个元素 E F 包含选择器 选择匹配F的元素，且该元素被包含在匹配E的元素内。注意，E和F不仅仅是指类型选择器，可以是任意合法的选择符组合 E:link 链接伪类选择器 选择匹配E的元素，且匹配元素被定义了超链接并未被访问。例如，a:link选择器能够匹配已定义URL的a元素 CSS 1中定义的选择器 选择器概述 CSS 1中定义的选择器 E:visited 链接伪类选择器 选择匹配E的元素，且匹配元素被定义了超链接并已被访问。例如，a:visited选择器能够匹配已被访问的a元素 E:active 用户操作伪类选择器 选择匹配E的元素，且匹配元素被激活 E:hover 用户操作伪类选择器 选择匹配E的元素，且匹配元素正被鼠标经过 E:focus 用户操作伪类选择器 选择匹配E的元素，且匹配元素获取了焦点 E::first-line 伪元素选择器 选择匹配E的元素内的第一行文本 E::first-letter 伪元素选择器 选择匹配E的元素内的第一个字符 选择器概述 CSS 2中定义的选择器 选择器 类型 说明 * 通配选择器 选择文档中所有的元素 E[foo] 属性选择器 选择匹配E的元素，且该元素定义了foo属性。 注意，E选择符可以省略，表示选择定义了foo属性的任意类型的元素 E[foo=bar] 属性选择器 选择匹配E的元素，且该元素将foo属性值定义为了bar注意E选择器可以省略，用法与上一个选择器类似 E[foo|=en] 属性选择器 选择匹配E的元素，且该元素定义了foo属性，foo属性值时一个用连字符（-）分割的列表，值开头的字符为en，注意E选择符可以省略，用法与上一个选择器类似。 选择器概述 CSS 2中定义的选择器 E:first-child 结构伪类选择器 选择匹配E的元素，且该元素为父元素的第一个子元素 E:lang(fr) :lang()伪类选择器 选择匹配E的元素，且该元素显示内容的语言类型为fr E::before 伪元素选择器 在匹配E的元素前面插入内容 E::after 伪元素选择器 在匹配E的元素后面插入内容 E F 子包含选择器 选择匹配F的元素，且该元素为所匹配E的元素的子元素。注意，E和F不仅仅是指类型选择器，可以是任意合法的选择符组合 E + F 相邻兄弟选择器 选择匹配F的元素，且该元素位于所匹配E的元素后面相邻的位置。注意，E和F不仅仅是指类型选择器，可以使任意合法的选择符组合 基础选择器 2 主要内容 元素选择器 1 类选择器 2 ID选择器 3 属性选择器 4 元素选择器 最基本 元素选择器 HTML元素 类选择器 独立 类选择器 单独使用 结合使用 “.” 类选择器 只有适当地标注文档后，才能使用该选择器，所以使用该选择器之前通常需要先做一些构想和计划。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。 ID选择器 “#” ID选择器 id属性 属性选择器 height属性 属性 高度 id属性 区分 输入标签input 其他选择器 3 主要内容 后代选择器 1 子代选择器 2 相邻兄弟元素选择器 3 通用兄弟元素选择器 4 后代选择器 包含选择器 后代选择器 后代 规则 后代选择器 在后代选择器中规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符。每个空格结合符可以解释为“…在…找到” 、“…作为…的一部分” 、“…作为…的后代”，但是要求必须从右向左读选择器。 子代选择器 子元素 子代选择器 大于号 子代选择器 如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器。 相邻兄弟元素选择器 紧接 相邻兄弟元素选择器 相同 父元素 “+” 通用兄弟元素选择器 同一个父元素 通用兄弟元素选择器 所有 “~” 通用兄弟元素选择器 这里的同级是指子元素和兄弟元素的父元素是同一个元素。 输入标签input 伪类选择器及伪元素 4 *