A-CSS扩展选择器 (1)讲解.pptx

HTML5网页设计主讲：陈玲模块四CSS3基础

4.3CSS扩展选择器组合选择器包含选择器交集选择器伪类选择器制作最新资讯页面讲解时间：25分钟实践时间：20分钟

4.3.1组合选择器组合选择器（也称为并集选择器）将同样的定义应用于多个选择符。可以将选择符以逗号分隔的方式并为一个样式组，它的选择范围是各选择器范围的并集。任何形式的选择器都可以作为并集选择器的一部分，使用选择符组时，各选择器用逗号连接。p,.red,#header{ color:red; font-size:12px;}

4.3.2包含选择器包含选择器也称为后代选择器，它主要用于选择元素的后代元素，所谓后代元素即该标签内的元素，经常称外层的标签为父标签，内层的标签为子标签。divid=header ulclass=menu liahref=#家用电器/a/li liahref=#手机数码/a/li liahref=#日用百货/a/li /ul/div#headerullia{ color:blue; text-decoration:none;}后代选择器“#headerullia”表示选择id为“header”标签下的ul，ul下的li标签，li标签下的a标签。使用后代选择器比较灵活，且能较精确地选择页面元素。

4.3.3交集选择器交集选择器由两个选择器之间的连接构成，其结果是选中两者各自元素访问的交集。其中，第一个必须是标签选择器，第二个必须是类选择器或id选择器。这两个选择器之间不能有空格，必须连续书写。p.red{ color:red; font-size:23px;}该代码中的“p.red”即为交集选择器，该选择器的范围是选中p标签中class属性值为red的所有元素。

4.3.4伪类选择器CSS样式表中还提供了一种伪类选择器，所谓伪类即根据标签处于某种行为或状态时的特征来修饰样式。伪类可以对用户与文档交互时的行为作出响应。标签名:伪类名{ 属性：属性值;}伪类含义应用场景a:link未单击访问时的超链接样式常用，超链接主样式a:visited单击访问后的超链接样式区分是否已被访问a:hover鼠标悬浮在超链接上的样式常用，实现动态效果a:active鼠标单击未释放的超链接样式少用，通常与link一致

4.3.4伪类选择器body h1ThisisH1/h1 h2ThisisH2/h2 pclass=warningRealWarning!/p spanclass=warningCommonWorning/span pid=topid选择符/p h1span包含选择符/span pahref=#这里是链接/a/p pid=down超链接标签的CSS伪类link,visited,hover,active,CSS伪类，是一种特殊的类，它针对到CSS选择器起作用，使选中的标签或元素产生特定的效果。/p/bodystyletype=text/css h1,h2{color:red;} h1span{font-size:10px;font-weight:normal;} .warning{font-style:italic;} #top{font-size:36px;text-align:right;} a:link{color:#06F;text-decoration:none;} a:visited{ color:#999;text-decoration:line-through;} a:hover{color:#F00;text-decoration:underline;} a:active{color:#F0F;} #down{font-size:14px;line-height:1.5;} #down:first-letter{font-family:microsoftyahei; line-height:1;font-size:40px; }/style组合选择器类选择器ID选择器超链接未被访问前超链接已被访问过超链接鼠标悬停超链接被激活交集选择器

4.3.4学生实践练习使用HTML5中标签以及样式表制作最新资讯页面。实践时间：20分钟任务说明：

4.3.4学生实践练习创建HTML5文档。搭建页面布局使用h3标签实现“最新资讯”标题。使用ul标签和li标签实现新闻列表，其中每个li标签中包含一个超链接和图片。使用样式表实现对应效果超链接默认效果：字体颜色为黑色、不存在下划线、字号