css伪类和伪元素

最新推荐文章于 2024-08-15 15:20:23 发布

我是一个正经人

最新推荐文章于 2024-08-15 15:20:23 发布

阅读量204

点赞数

分类专栏： css 文章标签： css html

本文链接：https://blog.csdn.net/qq_52928436/article/details/119971576

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在网页中往往有些信息不能被选择器选中，比如CSS没有“光标点击”“文档首字母”之类的选择器，因此引入了伪类和伪元素来解决这些问题。伪类和伪元素的区别为

（1）伪类的操作对象为文档树中已有的元素，而伪元素操作的是文档数之外的元素。

（2）一般来说伪类使用“：”，伪元素使用“：：”双冒号，但大部分使用双冒号的伪元素也可以被浏览器识别。

伪类

用单冒号" : "表示伪类，表示CSS中已经定义好的，可以直接使用的某种属性，也可以理解为某种情况下的样式，或一种伪装的class类

常用的伪类如下

-hover 当鼠标划过时显示的CSS样式

-active 当鼠标点击时显示的CSS样式

-link 链接未访问

-visited 链接已经被访问

-focus 获取焦点

-first-child 选取选择器选中的第一个子元素

-last-child 选取选择器选中最后一个子元素

伪类的语法格式为

选择器：伪类{

属性：属性值

属性：属性值

.............

}

伪类的使用样例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
        a:link{
            color:black;
            font-size:20px;
        }
        a:visited{
            color:blue;
            font-size:50px;
        }
        a:hover{
            color:green;
            font-size:50px;
        }
        a:active{
            color:red;
            font-size:50px;
        }
        input:focus{
            background-color: brown;
        }
    </style>
</head>
<br>
    <a href="https://www.taobao.com/" target="_blank">淘宝</a><br>
    <!-- a:hover必须在a:link和a:visited之后 -->
    <!-- a:active必须在a:hover之后 -->
    请输入<input type="text"><br>
</body>
</html>

伪元素

与伪类一样，伪元素也不是真正的元素，在显示时看似是用HTML的某些元素实现，实则是通过CSS实现。常用的伪元素如下

：：before 在某元素前插入一些内容

：：after 在某元素后插入一些内容

：：first-letter 为首个字使用某种样式

：：first-line 为第一行使用某种样式

：：selection 匹配被用户选中或高亮的部分

伪元素的语法格式与伪类相同，只是最好使用双冒号

伪元素使用的样例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素</title>
    <style>
        .f1::first-line{
            color: red;
            font-size: 50px;
        }
        .f2::first-letter{
            color: black;
            font-size: 10px;
        }
        .f3::before{
            content:"23333";
        }
        .f3::after{
            content:"你好";
        }
        }
    </style>
</head>
<body>
    <p class="f1">
        第一行<br>第二行
    </p>
    <br>
    <p class="f2">
        第一行<br>第二行
    </p>
    <p class="f3">
        哈哈
    </p>
</body>
</html>