likes
comments
collection
share

一篇搞清伪类和伪元素

作者站长头像
站长
· 阅读数 55

本文目的：解决伪类和伪元素傻傻分不清楚的问题！

为了看得清晰，我将下文内容分成3个部分：

  1. 区分伪类和伪元素
  2. 将伪类和伪元素分类梳理
  3. 应用

一篇搞清伪类和伪元素

区分

伪元素在CSS3之前就已经存在，只是没有伪元素的说法，都是归纳为伪类，所有很多人分不清楚伪类和伪元素。比如常用的:before和:after，它们是伪类还是伪元素？其实在CSS3之前被称为伪类，直到CSS3才正式区分出来叫伪元素

那如何区分伪元素和伪类，记住两点：

1. 伪类表示被选择元素的某种状态，例如:hover

2. 伪元素表示的是被选择元素的某个部分，这个部分看起来像一个独立的元素，但是是"假元素"，只存在于css中，所以叫"伪"的元素，例如:before和:after

核心区别在于，是否创造了“新的元素”

分类梳理

由于伪类和伪元素存在较多，为了方便记忆，我将其汇总如下两图：

伪元素

一篇搞清伪类和伪元素

伪类

一篇搞清伪类和伪元素

应用

CSS3之前的伪元素

包括before、after、first-letter、first-line ，分别表示元素内容的前面、元素内容的后面以及第一个文字和第一行文字

比如

一篇搞清伪类和伪元素

代码如下

div.box1{
    border: 1px rgb(5, 248, 114) solid;
    background: rgb(221, 132, 214);
    background-clip: content-box;
    width: 400px;
    padding: 10px;
}
/* 伪元素before和after */
div.box1:before{
    content: "我是前面的before";
    color: rgb(177, 81, 13);
}
div.box1:after{
    content: "我是后面的after";
    color: rgb(243, 29, 72);
}
/* 伪元素:first-letter和:first-line*/
div.box2:first-letter{
    font-size: 3em;
    font-weight: bold;
}
div.box2:first-line{
    color: rgb(101, 245, 6);
}

CSS3之后新增的伪元素

包括selection和placeholder，分别表示被选中部分以及占位的文本

比如

一篇搞清伪类和伪元素

代码如下

div.section::selection{
    color: rgb(247, 8, 135);
}
input.placeholder::placeholder{
    background-color: rgb(80, 156, 231);
    color: rgb(19, 235, 235);
}

状态类伪类

分别有link、visited、hover、active和focus，分别表示正常状态下的链接、点击后、悬停时、被激活时和聚焦时

如下

一篇搞清伪类和伪元素

代码如下

a{
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;	
}
a.link:link{	
    background-color: rgb(71, 130, 240);	
}
a.visited:visited{
    color: rgb(128, 126, 126);
    background-color: rgb(203, 218, 151);
}
a.hover:hover{
    background-color: rgb(221, 51, 142);
}
a.active:active{
    font-size: 2em;
}
a.focus:focus{
    background-color: rgb(247, 142, 4);
}

结构类伪类

结构类伪类比较多 一篇搞清伪类和伪元素 下面来用用

一篇搞清伪类和伪元素

代码如下

p:not(.p1) {
    font-size: .8em;
}
p:first-child {
    font-weight: bold;
}
p:last-child{
    color: rgb(86, 168, 5);
}
p:only-child{
    color: lightcoral;
    background-color: rgb(193, 247, 193);
}
p:nth-child(2n){
    background-color: lightseagreen;
}
p:nth-last-child(3){
    color: #f44;
}

type系列会更常用一些，因为它突出的是同一类型的元素。由于用法基本一致，这里就不试了

下面看表单相关的伪类

表单相关的伪类

表单相关的伪类也有10多个，如下

一篇搞清伪类和伪元素

下面来试几个

一篇搞清伪类和伪元素

代码如下

input:checked{
    width: 25px;
    height: 25px;
}
input:disabled{
    background: rgb(168, 163, 163);
    color: rgb(128, 120, 120);
}
input:enabled{
    background: rgb(150, 205, 223);
}
.empty:empty{
    height: 1em;
    margin: 10px 0;
    background-color: rgb(231, 26, 231);
}

其他伪类

包括root、fullscreen、dir和lang等，其实它们用的都不多，不过也来试试，比如通过root伪类表示设置背景为黑色

一篇搞清伪类和伪元素

代码

:root{
    background-color: rgb(12, 12, 12);
}

以上是伪类和伪元素的总结，如有问题烦请留言告知，谢谢

END

附件：上述例子的源代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>源代码</title>
    <style type="text/css">
            :root {
                    background-color: rgb(12, 12, 12);
            }

            div.box1 {
                    border: 1px rgb(5, 248, 114) solid;
                    background: rgb(221, 132, 214);
                    background-clip: content-box;
                    width: 400px;
                    padding: 10px;
            }
            /* 伪元素before和after */
            div.box1:before {
                    content: "我是前面的before";
                    color: rgb(177, 81, 13);
            }
            div.box1:after {
                    content: "我是后面的after";
                    color: rgb(243, 29, 72);
            }
            /* 伪元素:first-letter和:first-line*/
            div.box2:first-letter {
                    font-size: 3em;
                    font-weight: bold;
            }
            div.box2:first-line {
                    color: rgb(101, 245, 6);
            }
            /* 伪元素selection和placeholder */
            div.section::selection {
                    color: rgb(247, 8, 135);
            }
            input.placeholder::placeholder {
                    background-color: rgb(80, 156, 231);
                    color: rgb(19, 235, 235);
            }
            /* 状态伪类 */
            a {
                    text-decoration: none;
                    padding: 10px;
                    border-radius: 5px;
            }
            a.link:link {
                    background-color: rgb(71, 130, 240);
            }
            a.visited:visited {
                    color: rgb(128, 126, 126);
                    background-color: rgb(203, 218, 151);
            }
            a.hover:hover {
                    background-color: rgb(221, 51, 142);
            }
            a.active:active {
                    font-size: 2em;
            }
            a.focus:focus {
                    background-color: rgb(247, 142, 4);
            }
            /* 结构性伪类 */
            p:not(.p1) {
                    font-size: .8em;
            }
            p:first-child {
                    font-weight: bold;
            }
            p:last-child {
                    color: rgb(86, 168, 5);
            }
            p:only-child {
                    color: lightcoral;
                    background-color: rgb(193, 247, 193);
            }
            p:nth-child(2n) {
                    background-color: lightseagreen;
            }
            p:nth-last-child(3) {
                    color: #f44;
            }
            /* 表单相关 */
            input:checked {
                    width: 25px;
                    height: 25px;
            }
            input:disabled {
                    background: rgb(168, 163, 163);
                    color: rgb(128, 120, 120);
            }
            input:enabled {
                    background: rgb(150, 205, 223);
            }
            .empty:empty {
                    height: 1em;
                    margin: 10px 0;
                    background-color: rgb(231, 26, 231);
            }
    </style>
</head>
<body>
    <!-- 伪元素 -->
    <div class="box1">元素内容</div>
    <div class="box2">另外一个div</div>
    <br>
    <div class="section">
            这里有很多内容这里有很多内容这里有很多内容
    </div>
    <input type="text" placeholder="这里是占位符" class="placeholder"><br><br>
    <!-- 状态伪类 -->
    <a href="#" class="link">正常链接</a>
    <a href="#" class="visited">点击过后</a>
    <a href="#" class="hover">悬停时</a>
    <a href="#" class="active">被激活状态</a>
    <a href="#" class="focus">获得焦点时</a>
    <!-- 结构类伪类 -->
    <div class="p">
            <p class="p1">这是一个段落</p>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
            <p>这是一个段落</p>
    </div>
    <div>
            <p>独生子</p>
    </div>
    <br><br>
    <!--元素的禁用和启用状态-->
    <input type="checkbox" checked />
    <input type="checkbox" />
    <input type="text" value="禁用了" disabled />
    <input type="text" value="启用的" />
    <div class="empty"></div>
    <br><br><br><br>
</body>

</html>
转载自:https://juejin.cn/post/6976646049456717838
评论
请登录