4.7 伪类

伪类是一种元素的当前状态
链接元素a有四个伪类：
名称说明
:link
链接未被访问时候生效
:visited链接已经被点击过生效
:hover鼠标悬停在链接上方生效
:active链接被点击（又没有放开鼠标）生效
在这里，hover这个伪类可以用在别的元素上，例如p，span、div等，下面是一段实例代码：
<style>
body{
    font-size:25px;
}
.a1{
    background:#666;
    text-indent:2em;
    line-height:1.5em;
    font-size:18px;
    text-align:center;
}
a:link{
    color:#F00;
}
a:visited{
    color:#0f0;
}
.a1:hover{
    color:#F0F;
    background:#000;
}
a:active{
    color:#00F;
}
</style>
<div>
    为什么dsfdsfdfsfdsafdd
</div>
<div class="a1">
    我是div元素，我的class值是a1，鼠标悬浮有特效
</div>
<div>
    dfdsfdsfdsfdfsfdsafdd
</div>
<div>
    <a class="a1" href="https://www.baidu.com">我是a元素，我的class值是a1，鼠标悬浮有特效</a>
</div>
<a href="https://www.baidu.com">fdsfdsfdsfdfsfdsafdd</a>
<a href="https://www.baidu.com">fdsfdsfdsfdfsfdsafdd</a>
<a href="https://www.163.com">新浪</a>
<p class="a1">
     我是p元素，我的class值是a1，鼠标悬浮有特效
</p>


练习题

  • 应用
    1.填上一个合适的伪类，是的鼠标悬停到div上方后字体颜色变成灰色，颜色要求（#CCC） (4分) [编程填空] 
    <code><div class='codeNewLine'><span><</span>html<span>></span></div><div class='codeNewLine'></div><div class='codeNewLine'><span><</span>head<span>></span></div><div class='codeNewLine'><span><</span>title<span>></span>无标题文档<span><</span>/title<span>></span></div><div class='codeNewLine'><span><</span>style<span>></span></div><div class='codeNewLine'>   div         {</div><div class='codeNewLine'>    color:        ;</div><div class='codeNewLine'>}</div><div class='codeNewLine'><span><</span>/style<span>></span></div><div class='codeNewLine'><span><</span>/head<span>></span></div><div class='codeNewLine'></div><div class='codeNewLine'><span><</span>body<span>></span></div><div class='codeNewLine'></div><div class='codeNewLine'><span><</span>div <span>></span>这是普通的文本<span><</span>/div<span>></span></div><div class='codeNewLine'></div><div class='codeNewLine'><span><</span>/body<span>></span></div><div class='codeNewLine'><span><</span>/html<span>></span></div></code>
    2.以下哪个伪类是链接已点击过效果 (2分) [选择]
    A.
    B. :link
    C. :visited
    D. :hover
    E. :active
    3.以下哪个伪类是鼠标悬停效果 (2分) [选择]
    A.
    B. :link
    C. :visited
    D. :hover
    E. :active
    4.如果要改变点击链接后的那个瞬间的样式，应该用哪个？ (2分) [选择]
    A.
    B. :link
    C. :visited
    D. :hover
    E. :active
  • 应用题
    1.悬停修改p元素的字体颜色 [编程(无自动批改)]
    在一个空白页面写一个p元素，内容随意，然后写一个css规则，当鼠标移动到该p元素上方的时候，p元素内部的字颜色改变（颜色随意）
    2.悬停修改div元素的背景 [编程(无自动批改)]
    在一个空白页面写一个div元素，内容随意，然后写一个css规则，当鼠标移动到该div元素上方的时候，div元素的背景发生改变（颜色随意）