css伪类选择器

最新推荐文章于 2023-10-27 23:56:06 发布

因渺小而伟大

最新推荐文章于 2023-10-27 23:56:06 发布

阅读量228

点赞数

分类专栏： HTML 文章标签： css的伪类 css常用伪类 css伪类使用

本文链接：https://blog.csdn.net/qq_43205282/article/details/103406138

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

css伪类选择器用于点击选择时产生不同的样式

css中常用的伪类

伪类名	含义
:active	向被激活的元素添加样式
:focus	向拥有输入焦点的元素添加样式
:hover	向鼠标悬停在上方的元素添加样式
:link	向未被访问的链接添加样式
:visited	向已被访问的链接添加样式
:first-child	向元素添加样式，且该元素是它的父元素的第一个子元素
:lang	向带有指定的lang属性的元素添加样式

示例：

<style>
        a:link{
            font-size: 20px;
            color: blue
        }
        a:hover{
            color: red;
        }
        a:active{
            font-size: 30px;
        }
        input:focus{
            background-color: yellow;
        }
        li:first-child{
            font-size: 30px;
        }
 </style>
<body>
<a href="http://www.baidu.com">www.baidu.com</a><br>
<a href="http://www.sohu.com">搜狐</a><br>
<a href="http://www.sina.com">新浪</a><br>
<from >
    用户名： <input type="text" id="username" ><br>
    密码： <input type="password"><br>
    <input type="submit" value="提交"><br>
</from>
<from>
    <ul>
        <li>吃</li>
        <li>喝</li>
        <li>玩</li>
        <li>乐</li>
    </ul>
    <ul>
        <li>东</li>
        <li>南</li>
        <li>西</li>
        <li>北</li>
    </ul>
</from>
</body>