Web前端——CSS伪类和伪元素

作者：正经夜光杯 | 2024-07-18 13:44:55

踩

css伪类和伪元素

CSS伪类：

1.伪类的概念：

可以理解为描述元素的某种状态，用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。

2.伪类的语法：

标签:伪类{设置的样式，伪类可以与 CSS 类配合使用}


 /* 鼠标覆盖在元素上面显示红色 */
        div:hover{
            background-color: red;
        }

3.伪类的常用实例

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

4.常用伪类：

伪类选择器	例子	作用
:hover	a:hover	鼠标覆盖在元素上状态
:active	a:active	鼠标在元素上并按下左键
:link	a:link	元素链接点击前的样式
:visited	a:visited	元素链接点击后的样式
:focus	input:focus	获取焦点的样式
:frst-child	li:first-child	第一个子级
:frst-of-type	ul li:first-of-type	特定的第一个子级
:last-child	li:last-child	最后一个子级
:last-of-type	ul li:last-child	特定的最后一个子级
:nth-child(n)	li:nth-child(2n)	第n个子元素（2n为2的倍数）
:nth-of-type(n)	li:nth-of-type(3n+1)	指定类型的第n个子元素（3n+1为3的倍数+1）
:nth-last-child(n)	li:nth-last-child(n)	倒数第n个子元素
:nth-last-of-type(n)	li:nth-last-of-type(n)	指定类型的倒数第n个子元素


<!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>伪类选择器</title>
    <style>
        div{
            /* 常态 */
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        /* 鼠标覆盖在元素上面显示红色 */
        div:hover{
            background-color: red;
        }
        a:link{
            /* 链接前 */
            color: tomato;
        }
        a:visited{
            /* 链接后 */
            color: skyblue;
        }
        a:hover{
            /* 鼠标覆盖 */
            cursor: pointer;
            /* 鼠标覆盖后变小手效果 */
        }
        a:active{
            /* 响应 */
            /* 鼠标在元素上并按下左键 */
            color:pink;
        }
        input{
            outline: 0;
        }
        input:focus{
            /* 获取焦点 （获取光标） */
            border: 2px solid orange;
        }
        li:first-child{
            /* 只能是第一个li，li是第一个只级 */
            color: red;
        }
        li:last-child{
            color: red;
        }
        ul li:first-of-type{
            /* 第一个li类型的标签，li不用是第一个子元素 */
            color: skyblue;
        }
        li:nth-child(2){
            color:purple;
        }
        /* 2n为2的倍数 3n+1等公式*/
        li:nth-of-type(2n){
            color: hotpink;
        }
    </style>
</head>
<body>
    <div></div>
    <a href="https://ac.csdn.net">CSDN</a>
    <br>
    <input type="text">
    <ul>
        <h1>送给各位同学</h1>
        <li>劝学诗</li>
        <li>书中自有千钟粟。</li>
        <li>书中自有黄金屋。</li>
        <li>书中有马多如簇。</li>
        <li>书中自有颜如玉。</li>
    </ul>
</body>
</html>
<!-- a标签有4种伪类，建议按顺序书写 -->
<!-- link visited hover active -->

CSS伪元素：

1. 伪元素的概念：

可以理解为某个元素的子元素，但不存在于html中。用于创建一些不在文档树中的元素，并为其添加样式。

2.伪元素的语法：

标签::伪类{设置的样式，伪类可以与 CSS 类配合使用}


p::before{
            content:"大家好，我是";
            color:orange;
        }

3.伪元素的常用实例：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

4.常用伪元素：

伪元素选择器	例子	作用
::before	p::before	在元素前插入内容
::after	p::after	在元素后插入内容
::selection	p::selection	选择用户选择的元素部分
::frst-line	div::first-line	文本的第一行样式
::first-letter	div::first-letter	选择文本的首字母，只用于块元素
::placeholder	input::placeholder	只用于表单的提示文本


<!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>伪元素</title>
    <style>
        p{
            color:skyblue;
    
        }
        p::before{
            content:"大家好，我是";
            color:orange;
        }
        p::after{
            content:"，欢迎大家学习c1";
            color:tomato;
        }
        p::selection{
            color:blue;
        }
        div{
            width:400px;
        }
        div::first-line{
            color: tomato;
        }
        div::first-letter{
            font-size:40px;
        }
        input::placeholder{
           color: pink;
        }
    </style>
</head>
<body>
    <p>伪元素</p>
    <div>富家不用买良田,书中自有千钟粟。安居不用架高堂,书中自有黄金屋。出门莫恨无人随,书中车马多如簇。娶妻莫恨无良媒,书中自有颜如玉。男儿若遂平生志,六经勤向窗前读</div>
    <input type="text" placeholder="测试工具">
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/正经夜光杯/article/detail/845973