Css伪类

1、active、hover、visited和link伪类

规定链接的颜色：

a:link {color:#FF0000}     /* 未访问的链接 */
a:visited {color:#00FF00}  /* 已访问的链接 */
a:hover {color:#FF00FF}    /* 当有鼠标悬停在链接上 */
a:active {color:#0000FF}   /* 被选择的链接 */

注意点：

(1)为了产生预期的效果，在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后。

(2)为了产生预期的效果，在 CSS 定义中，a:active 必须位于 a:hover 之后。

(3)Pseudo-class（伪类）的名称对大小写不敏感。

(4)伪类可与 CSS 类配合使用。

 

2、first-child 伪类

定义和用法:first-child 伪类向元素的第一个子元素添加样式。

说明利用 :first-child 这个伪类，只有当元素是另一个元素的第一个子元素时才能匹配。

例1：匹配所有 <p> 元素中的第一个 <em> 元素

p em:first-child{
       font-weight:bold;
}
<p>I am a<em>strong</em> man. I am a <em>strong</em>man.</p>
<p>I am a<em>strong</em> man. I am a <em>strong</em>man.</p>

例2：

.testp:first-child{
       color: blue;
}
<divclass="test">
       <p>11111111111111111</p>
       <p>22222222222222222</p>
       <p>33333333333333333</p>
</div>

只有<p>11111111111111111</p>的样式为{color: blue;}

3、focus 伪类

(1) focus 伪类在元素获得焦点时向元素添加特殊的样式。IE 浏览器不支持此属性。说明这个伪类应用于有焦点的元素。

(2)如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :focus 伪类。

规定获得焦点的输入字段的颜色：(重要)

input:focus{
  color:yellow;
}