CSS伪类和伪元素

伪类：

作用是对所选元素做操作时加一些样式，或者对所选元素的子元素加样式。

语法：

标签:伪类动作{属性:值}

selector : pseudo-class {property: value}

标签.标签的类:伪类动作{属性:值}

selector.class : pseudo-class {property: value}

伪类可以有的动作：

属性描述CSS:active向被激活的元素添加样式。1:focus向拥有键盘输入焦点的元素添加样式。2:hover当鼠标悬浮在元素上方时，向元素添加样式。1:link向未被访问的链接添加样式。1:visited向已被访问的链接添加样式。1:first-child向元素的第一个子元素添加样式。2:lang向带有指定 lang 属性的元素添加样式。2

例子：

对a标签进行不同操作获得不同样式：

a:link {color: #FF0000}/* 未访问的链接 */a:visited {color: #00FF00}/* 已访问的链接 */a:hover {color: #FF00FF}/* 鼠标移动到链接上 */a:active {color: #0000FF}/* 选定的链接 */

伪元素：

与伪类作用相似，对所选的元素或该元素附近元素添加特殊样式。

注意：CSS3为了区别伪元素和伪类，将伪元素改写为两个冒号selector::pseudo-element

语法：

标签:需要做的动作{属性:值}

selector:pseudo-element {property:value;}

标签.需要做的动作:伪类动作{属性:值}

selector.class:pseudo-element {property:value;}

伪元素可以做的动作：

属性描述CSS:first-letter向文本的第一个字母添加特殊样式。1:first-line向文本的首行添加特殊样式。1:before在元素之前添加内容。2:after在元素之后添加内容。2

例子：

在h1标签后附上logo.gif图片：

h1:after  {  content:url(logo.gif);  }