CSS伪类和伪元素的区别
CSS伪类和伪元素的区别
概念
伪类
元素的某种状态
用于已有元素处于某种状态时为其添加对应的样式，这个状态是根据用户行为而动态变化的。
例如：当用户悬停在指定元素时，可以通过:hover来描述这个元素的状态，虽然它和一般css相似，可以为已有元素添加样式，但是它是不存在于DOM树中同时也不能被常规的CSS选择器获取到的信息，所以称为伪类。
伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。
任何常规选择器可以在任何位置使用伪类。伪类的语法不区分大小写。
伪元素
人为创造的不存在于DOM树中的抽象元素
用于创建一些不存在于DOM树中的抽象元素，并为其添加样式。例如，我们可以通过:before在一个元素之前添加一些文本，并为这些文本添加样式，虽然用户可以看见这些文本，但是它实际上并不在DOM树中。
伪元素由两个冒号::开头，然后是伪元素的名称。使用两个冒号是为了区别伪类和伪元素（CSS2中没有区别）。CSS2中已存在的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::。除了一些低于IE8版本的浏览器外，大部分浏览器都支持伪元素的双冒号::表示方法。
然而除了少部分伪元素如::backdrop必须使用双冒号::，大部分伪元素都支持单冒号和双冒号的写法，比如::after，写成:after一样可以正常运行。
w3c标准中说到，虽然CSS3标准要求伪元素使用双冒号的写法，但也依然支持单冒号的写法。为了向后兼容，我们建议你在目前还是使用单冒号的写法。
一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。
注：不排除未来会加入同一个选择器同时使用多个伪元素的机制。
使用伪元素时，必须设置content，否则无效。
::before是在被修饰元素的第一个子元素位来添加虚拟元素的。
::after是在被修饰元素的最后一个子元素位来添加虚拟元素的。
伪类和伪元素的区别
请看下面的例子：
例一：
DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
<style>style>
head>
<body>
<ul>
<li>第一列li>
<li>第二列li>
ul>
body>
html>
如果要给第一列添加样式，可以通过以下两种方式：
1，给第一列添加一个类，并在该类中定义样式：
DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
<style>
.first-column {
color: orangered;
}
style>
head>
<body>
<ul>
<li class="first-column">第一列li>
<li>第二列li>
ul>
body>
html>
2，如果不用添加类的方法，我们可以通过给第一个设置:first-child伪类来为其添加样式，这时，被修饰的依然存在于DOM树中
DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
<style>
ul :first-child {
color: burlywood;
}
style>
head>
<body>
<ul>
<li>第一列li>
<li>第二列li>
ul>
body>
html>
例二
DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
<style>style>
head>
<body>
<p>Hello, ByteDance.p>
body>
html>
给该段落第一个字母添加样式，可以有以下方法：
1，把第一个字母包裹标签内，并给元素设置样式:
DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
<style>
.first-letter {
font-size: 30px;
color: salmon;
}
style>
head>
<body>
<p><span class="first-letter">Hspan>ello, ByteDance.p>
body>
html>
2，通过设置:first-letter伪元素来实现，这时伪元素创建了一个原理类似于span的抽象元素为其添加样式，但实际上在DOM树中并不存在这个"span"元素。
DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
<style>
.p1::first-letter {
font-size: 40px;
color: yellowgreen;
}
style>
head>
<body>
<p class="p1">Hello, ByteDance.p>
body>
html>
从上述例子中可以看出，伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的抽象元素。因此，伪类与伪元素的区别在于：有没有创建一个文档树之外的抽象元素。
除此之外，
- 伪类侧重丰富选择器的选择范围，伪元素侧重表达或者定义不在语法定义范围内的抽象元素；
- CSS中伪类和伪元素的语法不同；
- 可以同时使用多个伪类，而只能同时使用一个伪元素；
伪类和伪元素的其他示例
DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
<style>
p:before {
content: "Moe ";
}
p:after {
content: " and handsome!";
}
style>
head>
<body>
<p>is awesomep>
body>
html>
伪元素是内联元素，要想设置宽高需要将其变为内联块或者块级元素，如下
DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
<style>
p::before {
content: "Moe";
display: inline-block;
width: 100px;
height: 100px;
background: tomato;
}
p::after {
content: " and handsome!";
display: inline-block;
width: 200px;
height: 200px;
background: burlywood;
}
style>
head>
<body>
<p>is awesomep>
body>
html>
伪元素之清除浮动
利用伪元素在不影响DOM树的条件下创建虚拟元素来清除浮动
DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
<style>
.box {
width: 300px;
border: 10px solid #000;
}
.box::after {
content: "";
display: block;
clear: both;
}
.box1 {
float: left;
width: 100px;
height: 100px;
background: burlywood;
}
.box2 {
float: left;
width: 100px;
height: 100px;
background: orangered;
}
style>
head>
<body>
<div class="box">
<div class="box1">div>
<div class="box2">div>
div>
body>
html>
伪元素的实际应用
指示器的制作
DOCTYPE html>
<html lang="zh-CN">
<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>Documenttitle>
<style type="text/css">
.slider {
position: relative;
width: 590px;
height: 470px;
}
.slider .indicator {
position: absolute;
left: 46px;
bottom: 20px;
width: 113px;
height: 15px;
/* background: yellowgreen; */
}
.slider .indicator .indicator-dot {
background: rgba(255, 255, 255, 0.4);
display: block;
float: left;
width: 8px;
height: 8px;
border: 1px solid;
border-color: rgba(0, 0, 0, 0.05);
/* box-sizing: border-box; */
border-radius: 50%;
/* opacity: 0.4; */
margin-right: 4px;
}
.slider .indicator .indicator-dot.indicator-active::before {
content: "";
display: block;
background: #fff;
width: 6px;
height: 6px;
border-radius: 50%;
opacity: 1;
position: relative;
top: 1px;
left: 1px;
}
style>
head>
<body>
<div class="slider">
<div class="indicator">
<i class="indicator-dot indicator-active">i>
<i class="indicator-dot">i>
<i class="indicator-dot">i>
<i class="indicator-dot">i>
<i class="indicator-dot">i>
<i class="indicator-dot">i>
<i class="indicator-dot">i>
<i class="indicator-dot">i>
div>
<img
src="https://imgcps.jd.com/img-cubic/creative_server_cia/v2/2000366/100011773146/FocusFullshop/CkRqZnMvdDEvMTk2NzY2LzEwLzEyMjM0LzQ1OTEwOC82MGU2OTMyM0U1NDI4MWUzNy9kOTBlNzM0ZTY2YmE5ZDM1LnBuZxIJMy10eV8wXzU0MAI47ot6QhMKD-e-jueahOa0l-eil-acuhAAQhYKEuW8gOWQr-eyvuiHtOeUn-a0uxABQhAKDOeri-WNs-aKoui0rRACQgoKBuS8mOi0qBAHWNqZqsn0Ag/cr/s/q.jpg"
alt=""
/>
div>
body>
html>
