.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 选取非活动状态时文档中高亮(反白)的部分

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

自蜂鸟网-器材频道，原文链接：https://m.fengniao.com/document/5358291.html

神牛高速同步闪光LED灯FV150/FV200系列在传统LED灯的基础上增加了闪光功能，既可作为LED灯使用，又可作为闪光灯使用。功率强劲，功能强大，设有8种特效模式打造更多创意拍摄。一灯两用，兼具LED常亮和高速同步闪光功能

神牛FV150/FV200高速同步闪光LED灯

※作为闪光灯

▷闪光时的亮度为常亮灯亮度的4倍，更好凝固动作瞬间。

▷闪光模式下可实现1/8000秒高速同步。

▷1/2功率时，可实现连续闪光1秒10张以上，高速同步可实现1秒8张。

LED常亮模式（100%）与闪光模式下（1/1）光效对比图：（ISO400，光圈F8）

该款产品内置神牛2.4G无线X系统，可兼容佳能、尼康、索尼、富士、奥林巴斯、松下和宾得相机。

内置神牛2.4G无线X系统

参数可自由调节

·作为LED灯

▷光效柔和，光源稳定，0%-100%精确调节亮度。

▷内置8种FX特效模式，模拟各种拍摄场景，轻松实现创意光效。

神牛FV150/FV200高速同步闪光LED灯

设计细节

标配物品

规格参数

·编辑观点

神牛FV150/FV200既可以成为LED常亮灯，也可以作为支持高速同步的闪光灯来使用，做到了一灯两用，扩展了它的适用范围和场景。

欢迎关注 蜂鸟网微信公众号：fengniaoweixin