伪元素和伪类

伪元素和伪类一、伪类1.1 定义css伪类css伪类用于向某些选择器添加特殊效果。伪类其实与普通的css类相类似可以为已有的元素添加样式但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式所以将其称为伪类。(这种文档树无法描述的状态是什么呢当一个元素在用户的不同行为下就变化成不同的状态这个行为的变化dom就无法描述就要产生伪类来为一些选择器添加特殊的效果)。但是细分伪类的话又分为动态伪类UI元素状态伪类CSS3的:nth选择器。动态伪类:link 未访问的链接:visited 已访问的链接:hover 鼠标移动到链接上:active 选定的链接:hover 用于当用户把鼠标移动到元素上面时的效果:focus 用于元素成为焦点对于:hover在IE6下只有a元素支持:active只有IE7-6不支持:focus在IE6-7下不被UI元素状态伪类:enabled typetext可写状态:disabled typetext不可状态:checked typeradio和typecheckbox有checked和unchecked两种状IE6-8不支持:checked,:enabled,:disabled这三种选择器。CSS3的:nth选择器:first-child 选择某个元素的第一个子元素:last-child 选择某个元素的最后一个子元素:nth-child() 选择某个元素的一个或多个特定的子元素:nth-last-child() 选择某个元素的一个或多个特定的子元素从这个元素的最后一个子元素开始算:nth-of-type() 选择指定的元素:nth-last-of-type() 选择指定的元素从元素的最后一个开始计算:first-of-type 选择一个上级元素下的第一个同类子元素:last-of-type 选择一个上级元素的最后一个同类子元素:only-child 选择的元素是它的父元素的唯一一个了元素:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素:empty 选择的元素里面没有任何内容。IE6-8和FF3-浏览器不支持:nth-child选择器。1.2全部的css伪类CSS伪类.png1.3 伪类的常见用法1、a标签的伪类a:link/* 未访问的链接 */a:visited/* 已访问的链接 */a:hover/* 鼠标移动到链接上 */a:active/* 选定的链接 */2、input获取焦点 :focusinputclassccctypetextvaluetest/