CSS控制链接—CSS偽类

来源：互联网发布：网络摄像头装什么卡编辑：程序博客网时间：2024/06/04 18:17

CSS控制元素的某种状态---偽类（用于向某些选择器添加特殊的效果）
    偽类的语法：元素标签偽类名称{属性：属性值;}
        a:link:未访问的链接
        a:hover:鼠标移动到链接上
        a:active:鼠标按下链接
        a:visited:已访问的链接

        如果在点击过后再返回到该页面还有一些效果的话就按照该顺序给链接添加状态 L V H A

　　自定义链接的CSS类：
a.类名称:状态(即选择符.类名称:偽类名称{属性：属性值})

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS控制链接—CSS偽类</title><style type="text/css">    a:link{text-decoration:none; color:#000;}    a:visited{text-decoration:none; color:#6F0;}    a:hover{text-decoration:underline; color:#00F;}    a:active{text-decoration:overline; color:#F00;}    a.web:visited{text-decoration:none; color:#000;}</style></head><body>    <div id="link">        <a href="http://www.baidu.com" class="web">网页设计</a> |         <a href="http://www.baidu.com">平面设计</a> |         <a href="http://www.baidu.com">网站前端</a> |         <a href="http://www.baidu.com">动画设计</a> |         <a href="http://www.baidu.com">软件开发</a> |         <a href="http://www.baidu.com">网页营销</a>          <a href="http://www.baidu.com">我会闪</a>    </div> </body></html>

:focus{属性:属性值}设置对象在成为输入焦点时的样式(IE6/7不支持)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS控制链接—CSS偽类</title><style type="text/css">    input{        width:200px;        height:25px;        border:2px solid #FF0;    }    input:focus{            background:#9FF;        }</style></head><body>     <label>用户名： <input type="text" name="username"/></label>     <label>密　码： <input type="text" name="pwd"/></label></body></html>

0 0