伪类和伪元素

傻乎乎的小不点

于 2022-09-20 19:19:47 发布

阅读量67

点赞数 3

文章标签： css css3 html

本文链接：https://blog.csdn.net/m0_62697897/article/details/126908601

版权

1.伪类选择器

2.伪元素选择器

1.伪类选择器

（1）伪类选择器可以理解为描述元素的某种状态

（2）:hover 鼠标移入覆盖

（3）:active 鼠标在元素上并按下左键

（4）:link 元素链接点击前样式

（5）:visited 元素链接点击后样式

（6）:focus 获取焦点样式

（7）:first-child 第一个子级

（8）:first-of-type 特定的第一个子级

（9）:last-child 最后一个子级

（10）:last-of-type 特定的最后一个子级

（11）:nth-child(n) 第n个子元素

（12）:nth-of-type(n) 指定类型的第n个子元素

（13）:nth-last-child(n) 倒数第n个子元素

（14）:nth-last-of-type(n) 指定类型的倒数第n个子元素

（15）注意：最主要的是a标签的4种伪类：lvha（l为link，v为visited，h为hover，a为active）

代码：

<style>
        div{
            /* 常态 */
            width: 100px;
            height: 100px;
            background-color: gold;
        }
        div:hover{
            background-color: brown;
        }
        a:link{
            /* 链接前 */
            color: tomato;
        }
        a:visited{
            /* 链接后 */
            color: aqua;
        }
        a:hover{
            color: gold;
        }
        a:active{
            color: pink;
        }
        input{
            outline: 0;
        }
        input:focus{
            /* 获取光标 */
            border: 2px solid orange;
        }
        ul li:first-child{
            /* 代表ul里面第一个li标签(只能是第一个li，li是第一个子级元素) */
            color: blue;
        }
        ul li:first-of-type{
            /* 第一个li类型的标签，li不用是第一个子元素 */
            color: green;
        }
        /* ul li:nth-child(2){
            color: coral;
        } */
        li:nth-of-type(2n){
            /* 前面加不加ul效果都是一样的  2n表示2的倍数*/
            color: cadetblue;
        }
    </style>
</head>
<body>
    <div></div>
    <a href="http://www.people.com.cn/">人民网</a>
    <br>
    <input type="text">
    <ul>
        <h1>努力学习</h1>
        <li>静夜思</li>
        <li>床前明月光</li>
        <li>疑是地上霜</li>
        <li>举头望明月</li>
        <li>低头思故乡</li>
    </ul>
</body>

运行结果：

2.伪元素选择器

（1）伪元素选择器可以理解为某个元素的子元素，但不存在与html中

（2）::after 元素前面的内容

（3）::before 元素后面的内容

（4）::first-line 文本的第一行样式

（5）::first-letter 文本的首字母，只用于块元素

（6）::placeholder 只用于表单的提示文本

代码：

<style>
        p{
            color: aqua;
        }
        p::before{
            /* p标签前面加的一段文字 */
            content: "大家好，";
            color: blueviolet;
        }
        p::after{
            /* p标签后面加的一段文字 */
            content: "欢迎大家学习伪元素知识";
            color: blue;
        }
        div{
            width: 200px;
        }
        div::first-line{
            /* 只针对于第一行文字 */
            color: brown;
        }
        div::first-letter{
            /* 第一行第一个文字 */
            font-size: 40px;
        }
        input::placeholder{
            color: cadetblue;
        }
    </style>
</head>
<body>
    <p>小不点</p>
    <div>《静夜思》是唐代诗人李白的诗作。此诗描写了秋日夜晚，旅居在外的诗人于屋内抬头望月而思念家乡的感受。前两句写诗人在作客他乡的特定环境中一刹那间所产生的错觉；后两句通过动作神态的刻画，深化诗人的思乡之情。全诗运用比喻、衬托等手法，表达客居思乡之情，语言清新朴素而韵味含蓄无穷，历来广为传诵。</div>
    <input type="text" placeholder="我就是个输入框">
</body>

运行结果：

傻乎乎的小不点

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
伪类和伪元素

（15）注意：最主要的是a标签的4种伪类：lvha（l为link，v为visited，h为hover，a为active）（14）:nth-last-of-type(n) 指定类型的倒数第n个子元素。（12）:nth-of-type(n) 指定类型的第n个子元素。（13）:nth-last-child(n) 倒数第n个子元素。（5）::first-letter 文本的首字母，只用于块元素。（8）:first-of-type 特定的第一个子级。（4）::first-line 文本的第一行样式。
复制链接

扫一扫