伪类和为元素的区别是什么？

发布时间：2023年12月27日

1，伪类的定义：伪类就是以：为前缀被添加到选择器结尾的关键字，当你想让你的样式在特定的状态下才会呈现到指定的元素上，就可以在这个元素的选择器后面加上相应的伪类。

1，动态伪类

：link :超链接没有被访问过的状态。

：visited:超链接被访问过的状态。

：hover:鼠标悬浮停留在上面的状态。

：active:当鼠标点击激活时候的状态。

：focus:获取焦点的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪类</title>
    <style>
        /* link表示没有被访问过的网站颜色 */
        a:link{
            color: rgb(255,0,54)
        }
        /*visited 表示被访问过的网站颜色 */
        a:visited{
            color: rgb(232,126,18);
        }
        /* hover 鼠标停留在上面的颜色 */
        a:hover{
            color: blue;
        }
         /* active 鼠标停留在上面的颜色 */
        a:active{
            color: blueviolet;
        }
        /* 获取焦点的元素 */
        input:focus{
            background-color: darkgray;
        }
    </style>
</head>
<body>
    <a href="https://ai.taobao.com/">淘宝的超链接</a>
    <label>
        <span>用户</span>
        <input type="text">
    </label>
</body>
</html>

动态伪类注意点：遵循LVHA即：link，visited，hover，active。

2，结构伪类

:first-child所有兄弟元素中的第一个。

:last-child所有兄弟元素中的倒数第一个。

:nth-child所有元素中的第n个。

:first-of-type所有同类元素中的第一个。

:last-of-type所有同类元素中的倒数第一个。

:nth-of-type所有同类中的第n个。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>结构伪类</title>
    <style>
        /* first-child是所有div下面的p元素第一个变红。
        切记:如果div下面的第一个元素它不是p那么第一个元素和p是不会发生任何变化的因为child是div下面的所有兄弟元素第一个，它找不到p
        
        */
         div>p:first-child{ 
            color: red;
        }
       /* last-child是div下面的最后一个p元素变红 */
        div>p:last-child{
            color: red;
        }
        /* 是div兄弟属性里面的第三个变蓝
        1，0 或 不写 ：什么都选不中 —— 几乎不用
        2，n ：选中所有子元素 —— 几乎不用
        3，1~正无穷的整数 ：选中对应序号的子元素
        4，2n 或 even ：选中序号为偶数的子元素
        5，2n+1 或 odd ：选中序号为奇数的子元素
        */
        div>p:nth-child(3){
            color: blue;
        }
        /* div下面同类型第一个 */
        div>p:first-of-type{
            color: yellow;
        }
        /* 同类型倒数第一个 */
        div>p:last-of-type{
            color: yellow;
        }

        /* 同类型第一个 */
       div>p:nth-of-type(1){
           color: yellow;
       }
    </style>
</head>
<body>
    <div>
        <span>夏飞：100</span>
        <p>张三：98分</p>
        <p>李四：88分</p>
        <p>王五：78分</p>
        <p>赵六：68分</p>
        <p>孙七：58分</p>
        <p>老八：48分</p>
    </div> 
<br><br>
<br>
<div>
    <span>测试1</span>
    <p>张三：98分</p>
    <p>李四：88分</p>
    <p>王五：78分</p>
    <span>测试2</span>
    <p>赵六：68分</p>
    <span>测试3</span>
    <p>孙七：58分</p>
    <span>测试4</span>
    <p>老八：48分</p>
    <span>测试5</span>
</div>
</body>
</html>

切记使用child的时候?:如果div下面的第一个元素它不是p那么第一个元素和p是不会发生任何变化的因为child是div下面的所有兄弟元素第一个，它找不到p，这就是child和of-type的区别

2.

:nth-last-child(n) 所有兄弟元素中的倒数第 n 个。

:nth-last-of-type(n) 所有同类型兄弟元素中的 倒数第n个 。

:only-child 选择没有兄弟的元素（独生子女）。

:only-of-type 选择没有同类型兄弟的元素。

:root 根元素。

:empty 内容为空元素（空格也算内容）。

这些了解即可

3，否定伪类

:not（）排除括号内满足条件的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /* 排除class值为a的元素其它都变红 */
        div>p:not(.a){
            color: brown;
        }
    </style>
</head>
<body>
    <div>
        <p class="a">张三</p>
        <p class="b">李四</p>
        <p class="c">王五</p>
        <p class="d">赵六</p>
        <p class="e">麻子</p>

    </div>
</body>
</html>

4，Ui伪类

1.checked被选中的复选框或者多选框。

2.disabled不可用的单元框里面有（disabled值的）。

3.:enable 可用的表单元素（没有 disabled 属性）。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>结构伪类</title>
    <style>
        /* enabled选中正常使用的表单元素 */
        input:enabled{
            color: aqua;
            background: rgb(36, 165, 16);
        }
        /* disabled选中被禁掉的表单元素 */
        input:disabled{
            color: black;
            background-color: rgb(36, 165, 16);
        
        }
        /* checked是选中复选框和按钮的，只可以调高宽不能调颜色 */
        input:checked{
            width: 26px;
            height: 26px;
        }
      
    </style>
</head>
<body>
   <form action="https://www.toutiao.com/search" target="tz"> 
           <!-- 可用的表单元素 -->
       <input type="text" name="keyword"><button>搜索</button><br>
           <!-- 不可用的表单元素 -->
       <input type="text" disabled><br>
       <span>性别</span>
       <!-- 复选框和按钮 -->
       <input type="radio" name="性别" value="女生">女生
       <input type="radio" name="性别" value="男生">男生
       <input type="checkbox" name="爱好" value="学习">
   </form>
</body>
</html>

5，目标伪类

:target 选中锚点指向的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>目标伪类</title>
    <style>
        div:target{
            background-color: brown;
        }
    </style>
</head>
<body>
   <a href="#a">第一个</a>
   <a href="#b">第二个</a>
   <a href="#c">第三个</a>
   <a href="#d">第四个</a>
   <a href="#e">第五个</a>
   <a href="#f">第六个</a>
    <div id="a">第1个</div>
    <br>
    <div id="b">第2个</div>
    <br>
    <div id="c">第3个</div>
    <br>
    <div id="d">第4个</div>
    <br>
    <div id="e">第5个</div>
    <br>
    <div id="f">第6个</div>
</body>
</html>
    
</body>
</html>

6，语言伪类

:lang根据指定的语言选择元素（本质是看 lang 属性的值）

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>语言伪类</title> 
    <style>
        /* 选择语言元素为en的 */
        div:lang(en){
            color: blue;
        }
        /* 如果直接选择zh-cn那么div除了我们定义的en之外全部都会被选中 */
        div:lang(zh-cn){
            color: aqua;
        }
    </style>
</head>
<body>
    <!-- 给这个语言解析设置成en -->
    <div lang="en">您们好</div>
    <div>您们好</div>
    <div>您们好</div>
    <div>您们好</div>
    <div>您们好</div>
    <div>您们好</div>
</body>
</html>

2，伪元素

1，作用：选中元素中的一些特殊位置。

2，伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前添加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际不在文档树中

::first-letter 选中元素中的第一个文字。

::first-line 选中元素中的第一行文字。

::selection 选中被鼠标选中的内容

::placeholder 选中输入框的提示文字。

::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。

::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* first-line选中第一行文字 */
        div::first-line{
            color: fuchsia;
        }
        /* 
        first-letter选中第一行的第一个文字
         */
        div::first-letter{
            color: yellow;
            font-size: 40px;
            font-family: "楷体";
        }
        /* selection选中时候的字体文字颜色和背景色 */
        div::selection{
            color: burlywood;
            background-color: aquamarine;
        }
        /* 改变表单元素里面placeholder的值 */
        input::placeholder{
            color: blue;
        }
        /*  before 在p元素之前加上..... 切记里面要写上 content*/
        p::before{
            content: "$";
        }
        /* after 在p元素之后加上....... */
        p::after{
            content: ".00";
        }

    </style>
</head>
<body>
    <div>清华大学一份题为《中国长期低碳发展战略与转型路径研究》（以下简称《报告》）的最新研究报告显示，当前越来越多的国家和地区将实现碳中和作为长期发展战略和愿景。我国2060年实现碳中和，减排将远超发达国家2050年碳中和。因为欧、美从碳达峰到碳中和，有50~70年过渡期，而中国只有30年。
        碳中和，是指企业、团体或个人测算在一定时间内直接或间接产生的温室气体排放总量，通过植树造林、节能减排等形式，以抵消自身产生的二氧化碳排放量，实现二氧化碳“零排放”。为应对气候变化这一全人类共同面临的重大而紧迫的全球性挑战，2015年全球196个国家和地区签署的《巴黎协定》就控制全球温升不超过2℃并努力控制1.5℃以下的应对气候变化目标达成共识，实现这一目标需要世界各国都必须加大控制和减排温室气体的力度，到 2050年全球要实现二氧化碳的近零排放，甚至要实现净零排放。
        针对中国如何在新时代社会主义现代化建设的宏伟蓝图中规划低碳发展的战略、路径和措施，如何根据《巴黎协定》的原则履行符合我国国情和能力的国际责任和义务，如何推动和引领全球气候治理进程等课题，从2019年年初起，清华大学气候变化与可持续发展研究院联合国内18家研究机构开展了“中国低碳发展战略及转型路径”项目研究，开展了18个子课题的特定领域项目研究，研究论证我国在2050年实现碳中和的可能性，并评价相应技术路径、成本、障碍以及对经济社会影响。上述报告是该项目的核心成果。
        “与2005年相比，2019年的我国单位GDP二氧化碳排放下降了48%，同期，GDP增长超4倍，实现95%的贫困人口脱贫，第三产业占比从41.3%增长到53.9%，煤炭消费比重从72.4%下降到55.7%，非化石能源占一次能源比重从7.4%提高到15.3%，居民人均预期寿命由72.9岁提高到77.3岁。”清华大学气候变化与可持续发展研究院院长解振华表示，应对气候变化的政策行动，不但不会阻碍经济发展，而且有利于提高经济增长的质量，培育带动新的产业和市场，扩大就业，改善民生，保护环境，提高人们的健康水平，发挥协同增效的综合效益。
        报告提出，为达减排目标，我国应努力争取在2025年左右达到二氧化碳排放峰值，到2050年基本实现二氧化碳净零排放，全部温室气体减排约90%。2050年后还要进一步加强非二氧化碳温室气体减排以及增加碳汇和采用负排放措施，尽快实现全部温室气体净零排放，达到碳中和目标。
        但解振华也坦言，我国的低碳发展转型还面临三大挑战：一是制造业在国际产业价值链中仍处于中低端，产品能耗物耗高，增加值率低，经济结构调整和产业升级任务艰巨；二是煤炭消费占比较高，仍超过50%，单位能源的二氧化碳排放强度比世界平均水平高约30%，能源结构优化任务艰巨；三是单位GDP的能耗仍然较高，为世界平均水平的1.5倍、发达国家的2~3倍，建立绿色低碳的经济体系任务艰巨。
        报告指出，实现长期深度脱碳或碳中和目标，需要有突破性技术支撑。除进一步强化普遍关注的需求侧管理和能效技术、新能源和可再生能源发电和热利用技术外，特别需要关注当前技术还不太成熟、成本较高，但对深度脱碳可发挥关键作用的战略性技术。
        报告建议，“十四五”规划中应强化应对气候变化目标和政策措施，新增电力需求可主要依靠增加非化石能源电力满足，以有效抑制煤电供给和煤炭消费量的反弹。“十四五”期间除个别情况下因电网调峰和区域供热等补短板需求外，要严格控制新建煤电站。
        报告还建议加强应对气候变化立法，以法律形式保障应对气候变化战略、机制和政策体系的实施以及长期减排目标的实现，加强和完善支撑长期低碳发展的财税金融政策体系，加大政府财政投入和税收优惠，形成支持低碳转型的投融资机制，加快推进全国碳排放权交易市场建设，发挥市场机制对推进能源和经济低碳转型的基础性作用，以市场机制和政府规制性措施相结合，保障国家减排目标的实现。
    </div>
    <input type="text" placeholder="请输入密码">
    <p>900</p>
    <p>900</p>
    <p>900</p>
    <p>900</p>
    
</body>
</html>
二、区别

1.伪类是通过在元素选择器上加入伪类改变元素状态。

2.伪元素通过对元素的操作进行对元素的改变。

3.注意点伪类是前缀：，而为元素是前缀以：：

文章来源:https://blog.csdn.net/m0_66166501/article/details/135220471
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章