2.3,2.4锚伪类和选择器的优先级.pptx

锚伪类及选择器的优先级 一、温故而知新 Css选择器复习（基本选择器、复合选择器）及选择器的命名规则 了解其它复合选择器 1）、父子选择器 #lefth1 ie6以上支持 2）、通配选择器 * 不建议使用，会降低浏览器的执行效率 3）、属性选择器 h1[align]{ color:red;} 拥有align属性的元素，ie6以上版本支持 复习锚标签及其相关属性 与派生选择器有什么区别？ 二、教学目标 了解什么是伪类 熟练掌握锚伪类及使用顺序（重点） 熟练掌握并计算选择器的优先级（重难点） 1、伪类的概念 是一种特殊的类，由css自动支持，属css的一种扩展类型。伪类的名称不能被用户定义，必须使用标准格式。 2、锚伪类（重点） 在支持css的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态、已被访问状态、未被访问状态和鼠标悬停状态。 a:link{ color:red} a:visited{ color:blue} a:hover{ color:black} a:active{ color:yellow} 注：在css定义中，a:hover必须被置于a:link和a:visited之后，才是有效的；a:active必须被置于a:hover之后，才是有效的，伪类对大小写不敏感。顺序为：LVHA（爱恨法则） IE6和ff中必须有清空缓存才能查看a:link效果，对缓存依赖性强，一般使用锚伪类时只使用a{} a:hover{} 3、 课堂练习 要求： 默认状态显示第一行效果 鼠标经过显示第二行效果 4、 伪类与css类或与id结合使用 a#current:hover{ color:#cc0} a.red:hover{ color:red} a href=# id=current首页/a a href=# class=red新闻/a 思考：如何实现导航效果？详见课本例3 5、选择器的优先级（重难点） 问题：若对同一段文本分别定义行内、标记选择器、id、class选择器，且属性一致，则显示样式是什么？ 代码演示 行内idclass标记 CSS 优先级包含四个级别（行内选择符，ID 选择符，Class 选择符，标签选择符）以及各级别出现的次数。根据这四个级别出现的次数计算得到CSS 的优先级。 此处结合css课本，并进行举例。 四、小 结 五、作业 熟练掌握伪类的基本语法及锚伪类的四种状态和使用顺序 了解其它伪类 掌握CSS选择器的优先级的计算方法 对课本上的例题、课下作业进行逐一测试