第13章 CSS3的选择器(HTML5与CSS3 Web前端开发技术).ppt

13.5 CSS3新增的选择器 13.5.2 伪类选择器 伪类选择器区别于类选择器，类选择器是由用户自行定义，而伪类选择器是在CSS中已经定义好的选择器。 伪类选择器可以分为结构伪类选择器和UI元素伪类选择器2种。 1. 基本结构伪类选择器 表13-2 基本结构伪类选择器 选择器 功能 :root 匹配文档的根元素 :not 对某个结构元素使用样式，但排除这个结构元素下面的子结构元素。 :empty 指定当元素内容为空白时使用的样式。 :target 对页面中某个target元素（该元素的id被当做页面的超链接来使用）指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。 13.5 CSS3新增的选择器 13.5.2 伪类选择器 13.5 CSS3新增的选择器 3.UI伪类选择器 表13-4 常用的UI伪类选择器 选择器 功能 E:enabled 选择匹配E的所有可用UI元素。注意，在网页中， UI元素一般是指包含在form元素内的表单元素。例如: input:enabled匹配下面代码框中的文本框，无法匹配该片段中的按钮。 form input type=text/ input type=buttondisabled=disabled / /form E:disabled 选择匹配E的所有不可用UI元素。注意，在网页中，UI元素一般是指包含在form元素的表单元素。例如: input:disabled匹配下面代码段中的按钮，但不匹配该片段中的文本框。 form input type=”text / input type= button disabled= disabled/ /form E:checked 选择匹配E的所有处于选中状态的UI元素。注意，在网页中，UI元素一般是指包含在form元素内的表单元素。 E:read-only 用来指定当元素处于只读状态时的样式。 E:read-write 用来指定当元素处于非只读状态时的样式。 E:hover 用来指定当鼠标指针移动到元素上面时元素所使用的样式。 E:active 用来指定当元素被激活时使用的样式。 E:focus 用来指定当元素处获得焦点时使用的样式。 13.5 CSS3新增的选择器 3.UI伪类选择器 13.5 CSS3新增的选择器 示例13-18是超级链接的伪类选择器的应用。 13.5 CSS3新增的选择器 示例13-19展示了伪类选择器:focus和:first-child的功能 13.5 CSS3新增的选择器 13.5.3 伪元素选择器 1．:first-letter和:first-line :first-letter用于选中元素内容的首字符。:first-line用于选中元素中的首行文本。 13.5 CSS3新增的选择器 2．选择器:before和:after :before和:after两个伪对象必须配合content属性使用才有意义。它们的作用是在指定的标记内产生一个新的行内标记，该行内元素的内容由content属性里的内容决定。 before选择器用于在某个元素之前插入内容。 E: before { content:文字或其他内容 } after选择器用于在某个元素之后插入内容。 E: after { content:文字或其他内容 } 13.5 CSS3新增的选择器 示例13-21展示了伪元素选择器的应用 13.6 使用CSS设计网站页面 本实例的布局使用表格，页面中的元素如文字、超级链接、表单、水平线等由CSS来控制，页面效果如图13-14所示。 13.6 使用CSS设计网站页面 1．网页布局 2．在页面中应用的样式 示例13-22的全部代码(略) 作业 * HTML5+CSS3 Web前端开发技术 LOGO HTML5+CSS3 Web前端开发技术 第13章 CSS3的选择器 CSS3概述 1 CSS的基本选择器 2 在HTML中使用CSS的方法 3 CSS复合选择器 4 CSS3新增的选择器 5 使用CSS设计网站页面 6 13.1 CSS3概述 13.1.1 CSS3简介 1．CSS的发展 2．浏览器对CSS3的支持 流行的浏览器对CSS都有很好的支持，但不同浏览器对CSS3很多细节的处理存在差异。 3．CSS的编辑器 Dreamweaver CS5、WebStorm、IntelliJ IDEA 13.1 CSS3概述 13.1.2 CSS的一个示例 示例13-1就是使用传统的HTML设计页面。 13.1 CSS3概述 13.1.2 CSS的一个