本文详细介绍了CSS选择器的各类用法，包括标签选择器、类选择器、ID选择器、通配符选择器、属性选择器及其各种组合形式，如后代选择器、子元素选择器、交集选择器、并集选择器等。此外，还深入讲解了伪类和伪元素选择器，如链接伪类、表单伪类、结构伪类等，以及它们在网页样式控制中的重要作用。通过对这些选择器的掌握，开发者可以更加精确地选取和操作网页元素，实现精细化的样式设计。
文章の目录
- 1、选择器有什么用了？
- 2、CSS 基础选择器
- 3、CSS 复合选择器
- 3.1、后代选择器（Descendant combinator）
- 3.2、子元素选择器（Child combinator）
- 3.3、交集选择器
- 3.4、并集选择器（Selector list）
- 3.5、一般兄弟组合器（通用兄弟选择器）（General sibling combinator）
- 3.6、紧邻兄弟组合器（Adjacent sibling combinator）
- 3.7、伪类选择器
- 3.7.1、什么是伪类选择器了
- 3.7.2、伪类选择器有什么作用了
- 3.7.3、伪类选择器的分类
- 3.7.3.1、链接伪类选择器
- 3.7.3.2、表单伪类选择器
- 3.7.3.2.1、:checked
- 3.7.3.2.2、:default
- 3.7.3.2.3、:defined
- 3.7.3.2.4、:disabled
- 3.7.3.2.5、:enabled
- 3.7.3.2.6、:focus
- 3.7.3.2.7、:focus-within
- 3.7.3.2.8、:indeterminate
- 3.7.3.2.9、:in-range
- 3.7.3.2.10、:out-of-range
- 3.7.3.2.11、:invalid
- 3.7.3.2.12、:valid
- 3.7.3.2.13、:optional
- 3.7.3.2.14、:read-only
- 3.7.3.2.15、:read-write
- 3.7.3.2.16、:required
- 3.7.3.3、结构伪类选择器
- 3.7.3.3.1、:empty
- 3.7.3.3.2、:not()
- 3.7.3.3.3、:first-child
- 3.7.3.3.4、:last-child
- 3.7.3.3.5、:first-of-type
- 3.7.3.3.6、:last-of-type
- 3.7.3.3.7、:nth-child
- 3.7.3.3.8、:nth-last-child
- 3.7.3.3.9、:nth-last-of-type
- 3.7.3.3.10、:nth-of-type
- 3.7.3.3.11、:only-child
- 3.7.3.3.12、:only-of-type
- 3.7.3.3.13、:first
- 3.7.3.3.14、:left
- 3.7.3.3.15、:right
- 3.7.3.4、其他
- 3.8、伪元素选择器
- 写在最后
1、选择器有什么用了？
如上图所示，要把里面的小黄人分为2组，最快的方法怎办？
很多， 比如：一只眼睛的一组，剩下的一组
选择器的作用其实就是找到特定的 HTML 页面元素的，通俗一点讲就是把我们想要的标签选择出来。
选择器分为基础选择器和复合选择器，下面我们分别介绍这些选择器。
2、CSS 基础选择器
2.1、标签选择器（Type selector）
2.1.1、什么是标签选择器了
标签选择器（元素选择器、类型选择器）就是用 HTML 标签名称（node节点名称）作为选择器，按标签名称分类，为页面中某一类标签指定统一的 CSS 样式。
2.1.2、基本语法格式
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
2.1.3、标签选择器有什么作用了
标签选择器可以把某一类标签全部选择出来，比如所有的 div 标签和所有的 span 标签。
2.1.4、优点
能快速为页面中同类型的标签统一样式。
2.1.5、缺点
不能设计差异化样式。
2.1.6、总结
- 在单独使用时，寻找特定类型的元素时，元素选择器都会匹配该文档中所有此类型的元素；
2.2、类选择器（Class selector）
2.2.1、什么是类选择器了
类选择器使用 “.” (英文点号)进行标识，后面紧跟类名。
2.2.2、基本语法格式
①类名选择器
.类名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
等价于下方的属性选择器
[class~=类名] {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
②标签
<p class="类名"></p>
2.2.3、类选择器有什么作用了
可以选出一个或多个标签。
2.2.4、优点
可以为元素对象定义单独或相同的样式，可以选择一个或多个标签，可以根据需求选择。
2.2.5、用途之多类名
注意
- 各个类名中间用空格隔开；
- 多类名选择器在后期布局比较复杂的情况下，还是较多使用的；
2.2.6、总结
- 长名称或词组可以使用中横线来为选择器命名；
- 不要纯数字，中文等命名，尽量使用英文字母来表示；
2.3、id 选择器（ID selector）
2.3.1、什么是 id 选择器
id 选择器使用 # 进行标识，后面紧跟 id 名。
2.3.2、基本语法格式
①id 选择器
#id名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
等价于下方的属性选择器
[id=id属性值] {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
②标签
<p id="id名"></p>
2.3.3、id 选择器有什么用了
一次只能选择一个标签。
2.3.4、缺点
只能使用一次。
2.3.5、与类选择器的区别
W3C标准规定，在同一个页面内，不允许有相同名字的 id 对象出现，但是允许相同名字的 class。
- 类选择器（class）：好比人的名字，是可以多次重复使用的，比如
张伟，王伟，李伟，李娜 - id 选择器：好比人的身份证号码，全中国是唯一的，不得重复。只能使用一次。
其实id选择器和类选择器最大的不同在于 使用次数上。
2.4、通配符选择器（Universal selectors）
2.4.1、什么是通配符选择器了
通配符选择器（通用选择器、通配选择器）用 * 号表示， * 就是选择所有的标签，他是所有选择器中作用范围最广的，能匹配页面中的所有的元素。
2.4.2、基本语法格式
* {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
2.4.3、通配符选择器有什么用了
选择所有的标签。
2.4.4、缺点
选择的太多，有部分不需要。
2.4.5、总结
会匹配页面所有的元素，降低页面响应速度，不建议随便使用。
2.4.6、包含 namespace 的通配符选择器
在使用 @namespace 时，通配符选择器带有命名空间的。这对于处理在文档中有多个命名空间（例如在H5中混合使用行内的 SVG、MathML、XML）是有用的。
ns|*- 会匹配命名空间ns下的所有元素；*|*- 会匹配所有元素；|*- 会匹配没有声明命名空间的所有元素；
示例1：
@namespace example url(http://www.example.com);
example|* { color: blue }
2.5、属性选择器（Attribute selector）
2.5.1、什么是属性选择器了
2.5.2、基本语法格式
2.5.2.1、[attr]
表示带有以 attr 命名的属性的元素。
示例如下：
div[lang] {
color: skyblue;
}
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好！</div>
<div lang="zh-TW">世界您好！</div>
<div data-lang="zh-TW">世界您好！</div>
效果如下图：
2.5.2.2、[attr=value]
表示带有以 attr 命名的属性，且属性值为 value 的元素。
示例如下：
div[lang='zh-CN'] {
color: tomato;
}
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好！</div>
<div lang="zh-TW">世界您好！</div>
<div data-lang="zh-TW">世界您好！</div>
效果如下图：
2.5.2.3、[attr~=value]
表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value。
示例如下：
div[lang~='en-us'] {
color: turquoise;
}
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好！</div>
<div lang="zh-TW">世界您好！</div>
<div data-lang="zh-TW">世界您好！</div>
效果如下图：
2.5.2.4、[attr|=value]
表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode 编码为 U+002D）开头。典型的应用场景是用来匹配语言简写代码（如 zh-CN，zh-TW 可以用 zh 作为 value）。
示例如下：
div[lang|='zh'] {
color: yellow;
}
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好！</div>
<div lang="zh-TW">世界您好！</div>
<div data-lang="zh-TW">世界您好！</div>
效果如下图：
2.5.2.5、[attr^=value]
表示带有以 attr 命名的属性，且属性值是以 value 开头的元素。
示例如下：
div[lang^='zh'] {
color: pink;
}
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好！</div>
<div lang="zh-TW">世界您好！</div>
<div data-lang="zh-TW">世界您好！</div>
效果如下图：
2.5.2.6、[attr$=value]
表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素。
示例如下：
div[lang$='CN'] {
color: red;
}
<div lang="en-us en-gb en-au en-nz zh-CN">Hello World!</div>
<div lang="pt">Olá Mundo!</div>
<div lang="zh-CN">世界您好！</div>
<div lang="zh-TW">世界您好！</div>
<div data-lang="zh-TW">世界您好！</div>
效果如下图：
2.5.2.7、[attr*=value]
表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素。
示例如下：
div[lang*='CN'] {
color: red;
}
<div lang="en-us en-gb en-au en-nz zh-CN">Hello World!</div>
<div lang="zh-TW zh-CN pt">Olá Mundo!</div>
<div lang="zh-CN zh-TW">世界您好！</div>
<div lang="zh-TW">世界您好！</div>
<div data-lang="zh-TW">世界您好！</div>
效果如下图：
2.5.2.8、[attr operator value i]
在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写（支持 ASCII 字符范围之内的字母）。
示例如下：
div[lang*='en-us' i] {
color: red;
}
<div lang="en-us en-gb en-au en-nz zh-CN">Hello World!</div>
<div lang="zh-TW zh-CN pt EN-US">Olá Mundo!</div>
<div lang="zh-CN zh-TW">世界您好！</div>
<div lang="zh-TW">世界您好！</div>
<div data-lang="zh-TW">世界您好！</div>
效果如下图：
3、CSS 复合选择器
目的是为了可以选择更准确更精细的目标元素标签。
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。
3.1、后代选择器（Descendant combinator）
3.1.1、什么是后代选择器了
后代选择器又称为包含选择器，（通常用单个空格（ ）字符表示）组合了两个选择器，如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父母，父母的父母，父母的父母的父母等）元素，则它们将被选择。利用后代组合器的选择器称为后代选择器。
3.1.2、后代选择器有什么用了
用来选择元素或元素组的子孙后代。
3.1.3、基本语法格式
把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，后写儿子孙子。
父亲 子级 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
}
示例如下：
.class h3 {
color: red;
font-size: 25px;
}
3.1.4、总结
- 当标签发生嵌套时，内层标签就成为外层标签的后代；
- 子孙后代都可以这么选择，或者说，它能选择任何包含在内的标签；
3.2、子元素选择器（Child combinator）
3.2.1、子元素选择器有什么用了
子元素选择器只能选择作为某元素子元素（亲儿子）（不包括孙子，重孙子）的元素。（选择最近一级）
3.2.2、基本语法格式
父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。
示例如下：
.class>h3 {
color: red;
font-size: 25px;
}
3.3、交集选择器
3.3.1、交集选择器产生的条件
交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。
3.3.2、基本语法格式
其中第一个为标签选择器，第二个为 class 选择器，两个选择器之间不能有空格，如 h3.special。
3.4、并集选择器（Selector list）
3.4.1、什么是并集选择器了
并集选择器（CSS 选择器分组、选择器列表）是各个选择器通过 , 连接而成的，通常用于集体声明。
3.4.2、基本语法格式
3.4.3、应用场景
如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。（只能用于集体声明）
3.4.4、总结
- 任何形式的选择器（包括标签选择器、class 选择器和 id 选择器等），都可以作为并集选择器的一部分；
- 记忆技巧：并集选择器用于集体声明，逗号隔开的，所有选择器都会执行后面样式，都好可以理解为和的意思；
- 在选择器列表中如果有一个选择器不被支持，那么整条规则都会失效；
3.5、一般兄弟组合器（通用兄弟选择器）（General sibling combinator）
3.5.1、什么是通用兄弟选择器了
兄弟选择符 ~，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。
3.5.2、基本语法格式
p ~ span {
color: red;
}
<div>
<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a span.</span>
</div>
效果如下图所示：
3.6、紧邻兄弟组合器（Adjacent sibling combinator）
3.6.1、什么是相邻兄弟选择器了
相邻兄弟选择器 (+) 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。
3.6.2、基本语法格式
li:first-of-type {
color: red;
}
li:first-of-type + li {
color: pink;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
效果如下图所示：
3.7、伪类选择器
3.7.1、什么是伪类选择器了
CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态。
伪类选择器就是在任何形式的选择器后面跟两个点也就是冒号，比如 a:link {}。
3.7.2、伪类选择器有什么作用了
用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第一个，第 n 个元素。
3.7.3、伪类选择器的分类
3.7.3.1、链接伪类选择器
3.7.3.1.1、:link
:link 伪类选择器是用来选中元素当中的链接。
3.7.3.1.2、:visited
表示用户已访问过的链接。
3.7.3.1.3、:hover
:hover CSS伪类适用于用户使用指示设备虚指一个元素（没有激活它）的情况。
用户的可视客户端比如Firefox，Internet Explorer，Safari，Opera or Chrome, 会在光标（鼠标指针）悬停在元素上时提供关联的样式。
3.7.3.1.4、：active
:active 伪类匹配被用户激活的元素。它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间（就是按住鼠标不松开）。
:active 伪类一般被用在 <a> 和 <button> 元素中。这个伪类的一些其他适用对象包括包含激活元素的元素，以及可以通过他们关联的 <label> 标签被激活的表单元素。
a:link----未访问的链接
a:visited----已访问的链接
a:hover----鼠标移动到链接上
a:active----选定的链接
注意
- 写的时候，它们的顺序尽量不要颠倒，按照
lvha的顺序，否则可能引起错误； - 因为叫链接伪类，所以都是利用交集选择器
a:link，a:hover； - 因为 a 链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式；
- 实际开发中，我们很少写全四个状态，一般我们写两个
a和a:hover；
3.7.3.2、表单伪类选择器
3.7.3.2.1、:checked
:checked 伪类选择器表示任何处于选中状态的radio，checkbox，或 select 元素中的option 元素。
3.7.3.2.2、:default
:default 表示一组相关元素中的默认表单元素。
该选择器可以在 <button>，<input type="checkbox">，<input type="radio"> 以及 <option> 上使用。
允许多个选择的分组元素也可以具有多个默认值，即，它们可以具有最初选择的多个项目。在这种情况下，所有默认值都使用 :default 伪类表示。
3.7.3.2.3、:defined
:defined 表示任何已定义的元素。这包括任何浏览器内置的标准元素以及已成功定义的自定义元素。
3.7.3.2.4、:disabled
:disabled 伪类表示任何被禁用的元素。
3.7.3.2.5、:enabled
:enabled 表示任何被启用的（enabled）元素。
3.7.3.2.6、:focus
表示获得焦点的元素（如表单输入）。当用户点击或触摸元素或通过键盘的 “tab” 键选择它时会被触发。
3.7.3.2.7、:focus-within
:focus-within 是一个 CSS 伪类，表示一个元素获得焦点，或该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配 :focus 伪类。
3.7.3.2.8、:indeterminate
表示状态不确定的表单元素
<input type="checkbox">元素，其 indeterminate 属性被 JavaScript 设置为 true；<input type="radio">元素，表单中拥有相同 name 值的所有单选按钮都未被选中时。处于不确定状态的；<progress>元素；
3.7.3.2.9、:in-range
代表一个 <input> 元素，其当前值处于属性 min 和 max 限定的范围之内。
3.7.3.2.10、:out-of-range
表示一个 <input> 元素，其当前值处于属性 min 和 max 限定的范围外。
3.7.3.2.11、:invalid
表示任意内容未通过验证的 <input> 或其他 <form> 元素。
若一组单选钮被设定为必须选定一个，在该组中没有按钮被选中的情况，:invalid 伪类被应用到该组中的所有按钮。（单选钮组按照 name 属性共享相同值。）
3.7.3.2.12、:valid
表示内容验证正确的 <input> 或其他 <form> 元素。
3.7.3.2.13、:optional
:optional CSS 伪类表示任意没有 required 属性的 <input>，<select> 或 <textarea> 元素使用它。
3.7.3.2.14、:read-only
表示元素不可被用户编辑的状态（如锁定的文本输入框）。
3.7.3.2.15、:read-write
代表一个元素（例如可输入文本的 input元素）可以被用户编辑。
3.7.3.2.16、:required
:required CSS 伪类表示任意设置了required 属性的 <input>，<select> 或 <textarea> 元素。这个伪类对于高亮显示在提交表单之前必须具有有效数据的字段非常有用。
3.7.3.3、结构伪类选择器
3.7.3.3.1、:empty
:empty 代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）。
3.7.3.3.2、:not()
用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。
:not() 伪类不能被嵌套，这意味着 :not(:not(…)) 是无效的。
由于伪元素不是简单的选择器，他们不能被当作 :not() 中的参数，形如 :not(p::before) 这样的选择器将不会工作。
可以利用这个伪类写一个完全没有用处的选择器。例如， :not(*) 匹配任何非元素的元素，因此，这个规则将永远不会被应用。
可以利用这个伪类提高规则的优先级。例如， #foo:not(#bar) 和 #foo 会匹配相同的元素，但是前者的优先级更高。
:not(.foo) 将匹配任何非 .foo 的元素，包括<html>和<body>。
这个选择器只会应用在一个元素上，无法用它来排除所有父元素。比如， body :not(table) a 依旧会应用到表格元素<table>内部的<a>上, 因为<tr>将会被 :not(table) 这部分选择器匹配。
:not() 伪类可以将一个或多个以逗号分隔的选择器列表作为其参数。选择器中不得包含另一个否定选择符或伪元素。
3.7.3.3.3、:first-child
表示在一组兄弟元素中的第一个元素。
3.7.3.3.4、:last-child
代表父元素的最后一个子元素。
3.7.3.3.5、:first-of-type
表示一组兄弟元素中其类型的第一个元素。
3.7.3.3.6、:last-of-type
表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。
3.7.3.3.7、:nth-child
:nth-child(an+b) 这个 CSS 伪类首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开始排序，选择的结果为 CSS 伪类 :nth-child 括号中表达式（an+b）匹配到的元素集合（n=0，1，2，3…）。示例：
- 0n+3 或简单的 3 匹配第三个元素。
- 1n+0 或简单的 n 匹配每个元素。（兼容性提醒：在 Android 浏览器 4.3 以下的版本 n 和 1n 的匹配方式不一致。1n 和 1n+0 是一致的，可根据喜好任选其一来使用。）
- 2n+0 或简单的 2n 匹配位置为 2、4、6、8…的元素（n=0时，2n+0=0，第0个元素不存在，因为是从1开始排序)。你可以使用关键字 even 来替换此表达式。
- 2n+1 匹配位置为 1、3、5、7…的元素。你可以使用关键字 odd 来替换此表达式。
- 3n+4 匹配位置为 4、7、10、13…的元素。
a 和 b 都必须为整数，并且元素的第一个子元素的下标为 1。换言之就是，该伪类匹配所有下标在集合 { an + b; n = 0, 1, 2, …} 中的子元素。另外需要特别注意的是，an 必须写在 b 的前面，不能写成 b+an 的形式。
3.7.3.3.8、:nth-last-child
:nth-last-child() 这个 CSS 伪类 从兄弟节点中从后往前匹配处于某些位置的元素
参数同 nth-child
3.7.3.3.9、:nth-last-of-type
:nth-last-of-type(an+b) 这个 CSS 伪类匹配那些在它之后有 an+b-1 个相同类型兄弟节点的元素，其中 n 为正值或零值。它基本上和 :nth-of-type 一样，只是它从结尾处反序计数，而不是从开头处。
参数同 nth-child
3.7.3.3.10、:nth-of-type
:nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签，用 n 来筛选出在一组兄弟节点的位置。
参数同 nth-child
3.7.3.3.11、:only-child
CSS伪类 :only-child 匹配没有任何兄弟元素的元素。
3.7.3.3.12、:only-of-type
:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。
3.7.3.3.13、:first
:first @page CSS 伪类选择器描述的是：打印文档的时候，第一页的样式
3.7.3.3.14、:left
需要和 @ 规则 @page 配套使用，对打印文档的左侧页设置 CSS 样式。
3.7.3.3.15、:right
:right CSS 伪类必须与@规则 @page 一起配套使用，表示打印文档的所有右页。
3.7.3.4、其他
3.7.3.4.1、:host
:host CSS伪类选择包含其内部使用的 CSS 的 shadow DOM 的根元素 - 换句话说，这允许你从其 shadow DOM 中选择一个自定义元素。
这个不太懂用法，也不知道应用场景，如果有使用过的gym，请在评论区留言，一起交流一下。
3.7.3.4.2、:lang()
:lang() CSS 伪类基于元素语言来匹配页面元素。
括号里的参数：
<language-code>
<string> 代表了你想定位的语言. 可接受的值为在HTML 规范中指定的值。
3.7.3.4.3、:root
:root 这个 CSS 伪类匹配文档树的根元素。
3.7.3.4.4、:scope
:scope 属于 CSS 伪类，它表示作为选择器要匹配的参考点的元素。
3.7.3.4.5、:target
代表一个唯一的页面元素(目标元素)，其 id 与当前 URL 片段匹配。
3.8、伪元素选择器
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。
3.8.1、总结
- 一个选择器中只能使用一个伪元素。伪元素必须紧跟在语句中的简单选择器/基础选择器之后。
- 按照规范，应该使用双冒号（::）而不是单个冒号（:）。
- 由 ::before 和 ::after 生成的伪元素包含在元素格式框内，因此不能应用在替换元素上，比如
<img>或<br>元素。 - 创建出来的元素在
Dom中查找不到，所以称为伪元素 - 伪元素和标签选择器一样，权重为 1
3.8.2、分类
3.8.2.1、::after
CSS伪元素 ::after 用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合 content 属性来为该元素添加装饰内容。这个虚拟元素默认是行内元素。
3.8.2.2、::before
::before 创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认为行内元素。
3.8.2.3、::cue
:: cue CSS 伪元素匹配所选元素中的WebVTT提示。这可以用于在 VTT 轨道的媒体中使用字幕和其他线索。
3.8.2.4、::first-letter
::first-letter 会选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容。
3.8.2.5、::first-line
在某 block-level element （块级元素）的第一行应用样式。
3.8.2.6、::selection
::selection CSS 伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。
3.8.2.7、::slotted()
:slotted() CSS 伪元素用于选定那些被放在 HTML模板中的元素
写在最后
如果你感觉文章不咋地
//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！
扫一扫
1983
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
