css中的伪类

伪类用于向某些选择器添加一些特殊效果。

1）:focus 伪类在元素获得焦点的时向元素添加特殊样式。一般用于输入文本域，按钮，以及超链接。

a:focus{color:red;}超链接字体为红色

input:focus{background-color:red;}表单文本输入内背景为红色

button:focus{color:red;background-color:#000;}点击后按钮背景为黑色，字体为红色。

2）:hover 在用户鼠标移动到元素上时会触发已添加的样式。用于字体大小，颜色，超链接都可以。

a:hover{color:yellow;}当用户移动到这个超链接时字体会变成黄色，还可以添加其他样式。

span:hover{color:yellow;font-size:25px;}当鼠标移动到span标签中字体会变成黄色并且变大。

3）:active 伪类向激活的元素添加样式（例如鼠标点击与释放之间发生的变化）

例如大家在点击某些表单时有些表单会有短暂的变化，就是用这个伪类设置的。

button:active{color:#333;background-color:#d4d4d4;border-color:#8c8c8c;}

这项属性就能实际点击鼠标时有那种感觉，如在配上前面两种在按钮处时就更恰当了。

4）:link 伪类向未访问的链接添加特殊的样式

a:link{color:#red} 这时候这个还没有被点击的链接就变成红色了，更加引入注意。

5）:visited 伪类向已访问的链接添加特殊样式。

a:visited{color:#000}这个与上面那个表达方式差不多，某些有洁癖的网友点击了某些链接之后就特别反感那种变淡红的样子，用这个伪类可以改变其颜色。

6）:first-child 伪类向元素的第一个子元素添加样式。这个用起来会比较复杂推荐用通用选择器

p:first-child{font-weight:bold}当有2个或多个P标签时它会选择第一个。

p>em:first-child{font-weight:bold}当P段落中第一个有EM的标签会加粗，并且如果两个P标签同一个位置的EM标签那都会被加粗。

P:first-child em{font-weight:bold}将EM添加到伪类后面这样P标签中的第一个段落中全部带有EM标签的都会加粗，而不会影响到其他P