属性选择器，伪类选择器

最新推荐文章于 2025-02-28 20:00:00 发布

原创最新推荐文章于 2025-02-28 20:00:00 发布 · 156 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #css3

CSS 专栏收录该内容

10 篇文章

订阅专栏

文章展示了CSS在网页设计中的应用，包括属性选择器用于设置文本框背景色，伪类选择器如:hover改变元素状态，以及如何使用链接伪类选择器管理超链接的不同状态。此外，还提供了一个创建百度导航栏的实践例子，涉及到列表样式、浮动布局和绝对定位。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style type="text/css">
                        /*属性选择器*/
                        input[type="password"]{
                                background-color: red;
                        }
                        input[type="text"][value="zhaoss1"]{
                                background-color: yellow;
                        }
                        
                </style>
        </head>
        <body>
                <form>
                        用户名：<input type="text" value="zhaoss1" />
                        用户名2：<input type="text" value="zhaoss2" />
                        密码：<input type="password" value="123123" />
                        <input type="submit" value="登录" />
                </form>
        </body>
</html>

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

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style type="text/css">
                        .mycls:hover{
                                color: red;
                        }
                </style>
        </head>
        <body>
                <h1 class="mycls">我是标题</h1>
        </body>
</html>

一般伪类选择器都用在超链接上：

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style type="text/css">
                        /*设置静止状态*/
                        a:link{
                                color: yellow;
                        }
                        /*设置鼠标悬浮状态*/
                        a:hover{
                                color: red;
                        }
                        /*设置触发状态*/
                        a:active{
                                color: blue;
                        }
                        
                        /*设置完成状态*/
                        a:visited{
                                color: green;
                        }
                </style>
        </head>
        <body>
                <a href="index.html">超链接</a>
        </body>
</html>

练习：百度导航栏

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style type="text/css">
                        ul{
                                list-style-type: none;/*将无序列表前面的图标取消*/
                        }
                        li{
                                float:left;/*向左浮动*/
                                margin-left: 20px;/*设置间隔20px*/
                        }
                        a{
                                text-decoration: none;/*去掉下划线*/
                                font-size: 13px;/*字号*/
                                color: black;/*字体颜色*/
                        }
                        a:hover{
                                color: #0000FF;
                        }
                        div{
                                /*定位：*/
                                position: absolute;/*绝对定位*/
                                right:200px;
                        }
                </style>
        </head>
        <body>
                <div>
                        <ul>
                                <li>
                                        <a href="aaaa">新闻</a>
                                </li>
                                <li>
                                        <a href="aaaa">hao123</a>
                                </li>
                                <li>
                                        <a href="aaaa">地图</a>
                                </li>
                                <li>
                                        <a href="aaaa">视频</a>
                                </li>
                        </ul>
                </div>
        </body>
</html>