1.CSS伪类和CSS伪元素

（1）伪类和伪元素的作用

相同之处：都是为某些选择器添加特殊的效果。不同之处：

伪类：操作DOM树中已存在的元素，根据元素不同的状态进行样式设置，在一个选择器中可以有多个伪类；

伪元素：创建DOM树之外的逻辑元素，针对元素中特定内容进行样式设置，在一个选择器中只能有一个伪元素；before和after伪元素中要有content属性。

（2）伪类和伪元素的语法

1）伪类的语法：

/* 伪类的语法：*/
selector:pseudo-class {property:value;}
/* CSS类也可以使用伪类：*/
selector.class:pseudo-class {property:value;}

2）伪元素的语法：

/* 伪元素的语法：*/
selector:pseudo-element {property:value;}或 selector::pseudo-element {property:value;} 
/*CSS类也可以使用伪元素*/
selector.class:pseudo-element {property:value;}或selector.class::pseudo-element {property:value;}

（3）伪类和伪元素有哪些

1）CSS 伪类有哪些？

css伪类有6种，分别为：动态伪类、结构伪类、语言伪类、元素状态伪类、目标伪类、否定伪类。

a）动态伪类

不同的状态，使用不同的样式。

E:link ：选择匹配的E元素，且匹配元素被定义了超链接且未被访问过；常用于链接标签。

E:visited ：选择匹配的E元素，且匹配元素被定义了超链接且已被访问过；常用于链接标签。

E:hover ： 选择匹配的E元素，且用户鼠标停留在元素E上；常用于链接标签。

E:active ：选择匹配的E元素，且匹配元素被激活；常用于链接标签和按钮上。

E:focus ： 选择匹配的E元素，且匹配元素获取焦点。

b）结构伪类

E:fisrt-child ：选择父元素的第一个子元素。与E:nth-child(1)等同。

E:last-child ：选择父元素的最后一个子元素。与E:nth-last-child(1)等同。

E:root ：选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同。

E F:nth-child(n)：选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0。

E F:nth-last-child(n)：选择父元素E的倒数第n个子元素F。

E:nth-of-type(n) ：选择父元素内具有指定类型的第n个E元素。

E:nth-last-of-type(n)：选择父元素内具有指定类型的倒数第n个E元素。

E:first-of-type：选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同。

E:last-of-tye ：选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同。

E:only-child ：选择父元素只包含一个子元素，且该子元素匹配E元素。

E:only-of-type：选择父元素只包含一个同类型子元素，且该子元素匹配E元素。

E:empty： 选择没有子元素的元素，而且该元素也不包含任何文本节点。

结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。

c）语言伪类

E: lang(language)：用来匹配使用指定语言的元素。

d）元素状态伪类

E:checked：匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

E:enabled：匹配每个启用的的元素（主要用于表单元素）。

E:disabled：匹配每个禁用的的元素（主要用于表单元素）。

e）目标伪类

E:target：选择匹配E的所有元素，且匹配元素被相关URL指向。是用来改变页面中锚链接URL所指向的ID元素的样式。

f）否定伪类

E:not(F)：匹配所有除F元素外的E元素

2）CSS 伪元素有哪些？

::after (:after) 在选中元素中创建一个后置的子节点

::before (:before) 在选中元素中创建一个前置的子节点

::first-line (:first-line) 选取文字块首行字符

::first-letter (:first-letter) 选取文字块首行首个字符

::selection 选取文档中高亮(反白)的部分

::placeholder 选取字段的占位符文本(提示信息)

::marker 选取列表自动生成的项目标记符号

::backdrop 匹配全屏模式下的背景

::slotted() 用于选定那些被放在 HTML模板 中的元素

::inactive-selection 选取非活动状态时文档中高亮(反白)的部分

#学问分亨官##闪光时刻二期##闪光时刻第二期主题征文#