CSS3中的伪元素用JS如何选择和操作什么是伪元素哪些是伪元素js更改伪元素的样式

伪元素用于向某些选择器设置特殊效果。已存在元素是指dom中存在的，伪元素则是虚拟的一种，样式也是给这个虚拟的元素使用的。

比如伪元素 :before和:after，用于在css渲染中向元素的头部或尾部插入内容，它们不受文档约束，也不影响文档本身，只影响最终样式。

这些添加的内容不会出现在dom中，仅仅是在css渲染层中加入。

它不存在于文档中，所以js无法直接操作它。而jquery的选择器都是基于dom元素的，因此也并不能直接操作伪元素。

:first-letter：向文本的第一个字母添加特殊样式。

:first-line:　向文本的首行添加特殊样式。

:before：在元素之前添加内容。　

:after：在元素之后添加内容。　

::placeholder：匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效。（只支持双冒号的形式）。

::selection：css伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。（只支持双冒号的形式）。　

::backdrop(处于试验阶段)：用于改变全屏模式下的背景颜色，全屏模式的默认颜色为黑色。（只支持双冒号的形式）。

更换class来实现伪元素属性值得更改：

2.使用cssstylesheet的insertrule来为伪元素修改样式：

addrule说明：

3.在标签中插入

修改伪元素的content的属性值,使用cssstylesheet的insertrule来为伪元素修改样式

注意:

伪元素的 content 属性很强大，可以写入各种字符串和部分多媒体文件。但是伪元素的内容只存在于css渲染树中，并不存在于真实的dom中。所以为了seo优化，最好不要在伪元素中包含与文档相关的内容。

修改伪元素的样式，建议使用通过更换class来修改样式的方法。因为其他两种通过插入行内cssstylesheet的方式是在javascript中插入字符代码，不利于样式与控制分离；而且字符串拼接容易出错。

修改伪元素的content属性的值，建议使用利用dom的 data-* 属性来更改。