CSS基础：伪类选择器

最新推荐文章于 2024-01-16 17:38:46 发布

路飞小朋友

最新推荐文章于 2024-01-16 17:38:46 发布

阅读量458

点赞数

分类专栏： ★ CSS

本文链接：https://blog.csdn.net/wozhangyi/article/details/106716871

版权

★ CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

伪类 link

伪类是给页面中已经存在的元素添加一个不存在类。
伪类用来描述一个元素的特殊状态，如：第一个子元素，鼠标点击的元素，鼠标移入的元素

常用伪类属性

:active 向被激活的元素添加样式
:focus 向拥有键盘输入焦点的元素添加样式
:hover 当鼠标悬浮在元素上方时，向元素添加样式
:link 向未被访问的链接添加样式
:visited 向已被访问的链接添加样式
:first-child 向元素的第一个子元素添加样式

伪类选择器处理超链接

给超链接不同状态添加不同的颜色或样式
a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的
a:active 必须被置于 a:hover 之后，才是有效的

<style>
    /* 未访问的链接 */
    a:link {color: yellow;}
    /* 已访问的链接 出于隐私考虑visited伪类只能修改颜色 */
    a:visited {color: peru;}
    /*  当鼠标移动到超链接*/
    a:hover {color: #00b3ff;}
    /* 选定的链接 */
    a:active {color: blue;}
</style>

<body>
<a href="https://www.baidu.com/">百度</a>
</body>

首个子元素 :first-child（所有）

根据父元素中的所有子元素进行排序
最后一个子元素 :last-child
第n个子元素 :nth-child(n)

<style type="text/css">
    h3:first-child{
        color: red;
    }
	/* 代表含义： li所在父元素中的第一个子元素 如果是li才会添加样式 */
    li:last-child{
        color: #00b3ff;
    }
    /*n全选 2n选偶数位 2n+1选奇数位 */
    li:nth-child(2){
        color: #4FEF10;
    }

</style>

<body>
<h3>今天星期天</h3>
<ul>
    <li>学编程</li>
    <li>学编程</li>
    <li>学编程</li>
</ul>

</body>

首个子元素 :first-of-type（同类型）

根据父元素中的同类型的子元素进行排序
最后一个子元素 :last-of-type
第n个子元素 :nth-of-type(n)

否定伪类 :not()

<style type="text/css">
    /*给除了第二个li的元素添加样式*/
    li:not(:nth-child(2)){
        color: #00b3ff;
    }
</style>

<body>
<ul>
    <li>学编程</li>
    <li>学编程</li>
    <li>学编程</li>
</ul>

焦点 :focus

向拥有键盘输入焦点的元素添加样式

<style type="text/css">
    input:focus{
        background: #4FEF10;
    }

</style>

<body>
<form action="#" method="get">
    账号：<input type="text" name="user"><br>
    密码：<input type="text" name="pwd"><br>
</form>
</body>

在这里插入图片描述

伪类选择器还有很多用法

<style>
    div{
        width: 100px;
        height: 100px;
        border: 2px yellow solid;
    }
    /*当鼠标移动到div  变色+放大*/
    div:hover {
        background-color: #00b3ff;
        width: 200px;
        height: 200px;
    }
</style>

<body>
<div></div>
</body>