伪类和伪元素你混淆了吗？

最新推荐文章于 2022-12-02 12:43:35 发布

前端酱紫

最新推荐文章于 2022-12-02 12:43:35 发布

阅读量166

点赞数

分类专栏： css3 前端总结

本文链接：https://blog.csdn.net/wuj1935/article/details/105154949

版权

前端总结同时被 2 个专栏收录

33 篇文章 2 订阅

订阅专栏

css3

19 篇文章 0 订阅

订阅专栏

		伪类  太监  
		1.一个冒号 
		2.可以有多个 
        3.可在前 或在后
        4.基于DOM，不产生新对象  (太监不能生育)
        伪类:
        状态类：:link  :visited :hover :active :focus
        结构类：:first-child :last-child :nth-child :nth-of-type
        表单类：:checked :disabled :valid :rqueired
        语言类：:dir :lang

		伪元素 皇帝  
		1.两个冒号
		2.只能有一个
        3.一定在最后面
        4.创建对象不存在DOM的对象，并且可以对这个DOM操作  (皇帝可以生育)
        伪元素:
        ::before ::after
        ::first-letter ::first-line 
        ::selection 
        ::planceholder
        ::backdrop

        语法    数量    位置    类与元素    使用场景
伪类     :       多个    前方和后方修饰          多
伪元素   ::      单个    后方     创建对象      少

以下是代码：

伪类伪元素个数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
            color: #eee;
            margin-left: 30px;
        }
        /* 1. 伪类 可以有多个，伪元素只能有一个  */
        
        input {
            font-size: 3em;
            width: 200px;
            height: 40px;
            border-radius: 10px;
        }
        
        input:out-of-range:focus {
            /* :out-of-range 输入的值在指定区间外时，设置指定样式 */
            /* :focus :out-of-range 伪类可以有多个 */
            /* 超出input的输入范围 input背景变成gold色 */
            background: gold;
        }
        
        input:out-of-range+h2::after {
            /* :out-of-range 伪类  */
            /* ::after 伪元素 只能有一个*/
            /* 超出input的输入范围h2拼接 超出范围的文字 */
            content: '超出范围';
            color: red;
        }
    </style>
</head>

<body>
    <div>
        <h1>请输入数字</h1>
        <input type="number" min="1" max="20">

        <h2>结果 : </h2>

    </div>
</body>

</html>

在这里插入图片描述

伪类伪元素位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
            color: #eee;
            margin-left: 30px;
        }
        /* 位置 伪元素只能放后面，伪类可以放前面 可以放后面 */
        
        input {
            margin: 100px 80px auto;
            width: 100px;
            height: 100px;
        }
        
        input::after {
            content: '已勾选';
            display: none;
            width: 150px;
            height: 50px;
            font-size: 30px;
            margin-left: 110px;
        }
        
        input:checked::after {
            display: block;
        }
        /* 伪元素只能放后面，不然不能达到想要的效果 */
        /* input::after:checked {
            display: block;
        } 
        */
    </style>
</head>

<body>
    <div>
        <!-- 位置 -->
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">

    </div>
</body>

</html>

在这里插入图片描述

伪类、伪元素 DOM操作

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            background-color: #00a8cc;
            padding: 30px;
            font-size: 50px;
            color: #eee;
        }
        
        li:nth-child(2n-1) {
            /* 伪类设置 对元素修饰 */
            color: gold;
        }
    </style>
</head>

<body>
    <div>
        <ol>
            <li>第一个</li>
            <li>第二个</li>
            <li>第三个</li>
            <li>第四个</li>
            <li>第五个</li>
        </ol>

    </div>
</body>

</html>

在这里插入图片描述

伪类伪元素优缺点对比

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            background-color: #00a8cc;
            padding: 30px;
            font-size: 50px;
            color: #eee;
        }
        
        p::first-letter {
            /* 
            伪元素设置 对元素修饰
            伪元素添加了一个元素对象，不会占用DOM对象节点
            */
            color: gold;
        }
    </style>
</head>

<body>
    <div>
        <!-- 
		伪类  太监  
		1.一个冒号 
		2.可以有多个 
        3.可在前 或在后
        4.基于DOM，不产生新对象  (太监不能生育)
        伪类:
        状态类：:link  :visited :hover :active :focus
        结构类：:first-child :last-child :nth-child :nth-of-type
        表单类：:checked :disabled :valid :rqueired
        语言类：:dir :lang

		伪元素 皇帝  
		1.两个冒号
		2.只能有一个
        3.一定在最后面
        4.创建对象不存在DOM的对象，并且可以对这个DOM操作  (皇帝可以生育)
        伪元素:
        ::before ::after
        ::first-letter ::first-line 
        ::selection 
        ::planceholder
        ::backdrop
        
        -->
        <!--        语法    数量    位置    类与元素    使用场景
            伪类     :       多个    前方和后方修饰          多
            伪元素   ::      单个    后方     创建对象      少
         -->
        <p>一二三四五</p>

    </div>
</body>

</html>

在这里插入图片描述

前端酱紫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
伪类和伪元素你混淆了吗？

伪类太监 1.一个冒号 2.可以有多个 3.可在前或在后 4.基于DOM，不产生新对象 (太监不能生育) 伪类: 状态类：:link :visited :hover :active :focus 结构类：:first-child :last-child :nth-child :nth-of...
复制链接

扫一扫