CSS之伪类

最新推荐文章于 2023-08-12 13:13:35 发布

杏黄的三叶草

最新推荐文章于 2023-08-12 13:13:35 发布

阅读量246

点赞数

分类专栏： Web前端CSS

本文链接：https://blog.csdn.net/dwjdj/article/details/104043681

版权

Web前端CSS 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

本文介绍了CSS中的伪类，包括用于设置a标签默认样式的``:link``，表示已访问过的``:visited``，鼠标悬停效果的``:hover``，激活状态的``:active``，以及输入元素获取焦点时的``:focus``。特别是目标伪类``:target``，它需要与锚链接配合使用，只有被锚链接指向的标签才会执行相应样式，但要注意可能存在浏览器缓存问题。

摘要由CSDN通过智能技术生成

伪类

a:link{属性:值;}
与a{属性:值;}
或者a:-webkit-any-link一样

作用：
1.设置a标签的默认样式
2.推荐直接使用a标签设置样式 a{属性:值;}

a:visited{属性:值;}

作用:
设置a标签被访问过的样式
◆该选择器会让浏览器有缓存的问题
◆该选择器只能设置与颜色相关的属性

a:hover{属性:值；}

作用:
设置鼠标悬停在标签上的样式，不只是a标签可以，其他标签也可以。

a:active{属性:值;}

作用：
鼠标单击不动时的样式

input:focus{属性:值;}

作用：
当input标签获取光标焦点时的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        a:link{
            color: red;

            /* 去掉下划线 */
            text-decoration: none;
        }
        a:visited {
            color: blue;
            font-size: 40px;
        }
        a:hover {
            color: pink;
            font-size: 30px;
            /* 设置下划线 */
            text-decoration: underline;
        }
        a:active {
            color: orange;
        }
        
        /*  div {
              width: 300px;
              height: 300px;
              background-color: red;
         }
         .one:hover {
              width: 200px;
              height: 200px;
              background-color: green;
         } */
        
        input[type="text"] {
            background-color: red;
        }
        input[type="text"]:focus {
            background-color: green;
        }
    </style>
</head>
<body>
<a href="#">文字</a>
<div class="one"></div>
<input type="text">
</body>
</html>

目标伪类

:target{属性:值;}

注意:
1.目标伪类要和锚链接配合使用
2.只有当被锚链接指向该标签的时候才会执行目标伪类中的css代码
3.也有缓存问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {
            height: 3000px;
        }
        .one:target {
            background-color: red;
        }
    </style>
</head>
<body>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div id="test" class="one">努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<div>努力把伤心变少笑容变多就好了</div>
<a href="#test">知识</a>
</body>
</html>