什么是超链接伪类和伪元素

翘指

已于 2022-10-20 11:00:30 修改

阅读量856

点赞数

分类专栏： html 文章标签：前端 javascript 开发语言 html

于 2022-10-20 11:00:12 首次发布

本文链接：https://blog.csdn.net/m0_65334415/article/details/127390205

版权

html 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

超链接伪类：

：link 用来表示没访问过的链接（正常的链接）
：visted 用来表示访问过的链接（由于隐私的原因，所以visited这个伪类只能修改链接的颜色
：hover 用来表示鼠标移入的状态
：active 用来表示鼠标点击

以：link为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a:link{
            color: antiquewhite;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu">超链接</a>
</body>
</html>

伪元素：

伪类是不存在的类，那么伪元素就是不存在的元素

伪元素表示页面中一些特殊的并不真实存在的元素（特殊的位置：ru）

伪元素使用：：开头

::first -letter表示第一个字母

::first-line 表示第一行

::selection 表示选中的内容

::after 元素的最后

::before 元素的开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p::first-letter{
            color: aquamarine;
        }
    </style>
</head>
<body>
    <P>
        lsdji d ifhuskdh fuhsd uifhiosdh fhsdui huioe
    </P>
</body>
</html>

::first-line 表示第一行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p::first-line{
            color: aquamarine;
            background-color: blue;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <P>
        lsdji d ifhuskdh fuhsd uifhiosdh fhsdui huioe
        usdihufihsduihfiusdhiufhiushfiohsduh
        <br>
        sduifhuiosdhf osdihfuiosdhufihds 
    </P>
</body>
</html>

::selection 表示选中的内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p::selection{
            color: aquamarine;
            background-color: blue;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <P>
        lsdji d ifhuskdh fuhsd uifhiosdh fhsdui huioe
        usdihufihsduihfiusdhiufhiushfiohsduh
        <br>
        sduifhuiosdhf osdihfuiosdhufihds 
    </P>
</body>
</html>

::before 元素的开始

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div::before
        {
            content: "abc";
            font-size: 100px;
        }
    </style>
</head>
<body>
    <div>abc  acbauh ua aih fuisadh iuu</div>
</body>
</html>

::after 元素的最后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div::after
        {
            content: "abc";
            font-size: 100px;
        }
    </style>
</head>
<body>
    <div>abc  acbauh ua aih fuisadh iuu</div>
</body>
</html>