伪类和伪元素-笔记
伪类：
The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.
百度翻译：伪类概念的引入是为了允许基于文档树之外的信息或其他简单选择器无法表示的信息进行选择。
个人理解：为了能够选择到文档树之外的信息或者普通选择器无法选中的信息，这是伪类存在的意义。
伪元素：
Pseudo-elements create abstractions about the document tree beyond those specified by the document language.
百度翻译：伪元素创建文档树的抽象，而不是文档语言指定的抽象。
个人理解：伪元素是为了将伪类的文本进行一些操作，例如在首尾增加文本，选中文本的第一行或者第一个字母等。
个人理解的区别：
伪类是选择到标签级别，例如p标签，span标签等。
伪元素是选择到标签中的文本级别（innerHTML去除标签后的文本）。
题外话：
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">去除HTML标签后的文本</a>
伪类的分类：状态伪类和结构性伪类。
状态伪类：是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。
常见的状态伪类：
1、 :link 未被访问过的链接；
2、 :hover 鼠标悬停到的元素；
3、 :active 被激活的元素；
4、 :visited 被访问过的链接。
5、 :focus 拥有键盘输入获得焦点的元素。
结构性伪类：利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素。
常见的状态性伪类：
1、:first-child 选择某个元素的第一个子元素；
2、:last-child 选择某个元素的最后一个子元素；
3、:nth-child() 选择某个元素的一个或多个特定的子元素；
4、:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
5、:nth-of-type() 选择指定的元素；
6、:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；
7、:first-of-type 选择一个上级元素下的第一个同类子元素；
8、:last-of-type 选择一个上级元素的最后一个同类子元素；
9、:only-child 选择的元素是它的父元素的唯一一个子元素；
10、 :only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；
11、:empty 选择的元素里面没有任何内容。
12、:checked匹配被选中的input元素，这个input元素包括radio和checkbox。
13、:default匹配默认选中的元素，例如：提交按钮总是表单的默认按钮。
14、:disabled匹配禁用的表单元素。
15、:enabled匹配没有设置disabled属性的表单元素。
16、:valid匹配条件验证正确的表单元素。
常见的伪元素选择器：
1、::first-letter 选择元素文本的第一个字（母）。
2、::first-line 选择元素文本的第一行。
3、::before 在元素内容的最前面添加新内容。
4、::after 在元素内容的最后面添加新内容。
5、::selection匹配用户被用户选中或者处于高亮状态的部分
6、::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效
::before例子
//在元素内容的最前面添加新内容
<style> p::before { content: "Hi,"; } </style> <body> <p>css</p> </body>
版权声明：本文为CSDN博主「阳光下的冷静」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_37686205/article/details/88396191
参考链接：https://www.jianshu.com/p/996d021bced3
参考链接：https://www.cnblogs.com/isme-zjh/p/11377308.html
