HTML中常见伪类和伪元素的区别

提到伪类，在人们的印象中最常用的不过是:hover、:active、:link、:visited，还有css3里的常用伪类选择器:last-child、:first-child、nth-child(n)等等!

w3c上对伪类和为元素的定义分别为:

伪类：伪类用于向某些选择器添加特殊的效果。伪元素：伪元素用于将特殊的效果添加到某些选择器

css3为了明确伪类和伪元素的区别，已经明确了单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素

span:hover //伪类

span::before //伪元素

但是，为了保证兼容性，现在伪元素普遍还是使用单引号。下面我将用单引号的形式给大家做介绍

常见的伪类（pseudo-classes）和伪元素（pseudo-elements）

HTML中常见伪类和伪元素的区别

伪元素的兼容性

Chrome 2+,

Firefox 3.5+ (3.0 had partial support),

Safari 1.3+,

Opera 9.2+,

IE8+ (with some minor bugs),

几乎所有的移动浏览器。

伪元素:before和:after的定义和基本用法

定义：

:before 选择器在被选元素的内容前面插入内容。

:after 选择器在被选元素的内容后面插入内容。

使用：

使用 content 属性来指定要插入的内容。content有几个比较有用的值：[String] – 使用引号包括一段字符串，将会向元素内容中添加字符串。示例：

a:after { content: "↗"}

attr() – 调用当前元素的属性，可以方便的比如将图片的 Alt 提示文字或者链接的 Href 地址显示出来。示例：

a:after { content:"(" attr(href) ")"}

url() / uri() – 用于引用媒体文件。示例：

h1::before { content: url(logo.png)}

counter() – 调用计数器，可以不使用列表元素实现序号功能。具体请参见 counter-increment 和 counter-reset 属性的用法。示例：

h2:before { counter-increment: chaptercontent: "Chapter " counter(chapter) ". " }

不可以。

首先伪元素（pseudo-element）应该是CSS相关的概念。

现有的浏览器支持或尚未支持的伪元素如下：

::after

::before

::first-letter

::first-line

::selection

::backdrop

::placeholder

::marker

::spelling-error

::grammar-error

在CSS中控制伪元素使用 selector::pseudo-element，比如给div添加 ::after

div::after {

    

    content : 'x'

    

    font-size : 14px

    color : red

}

所以你通过JS生成的HTML，在CSS中定义就好。

input:focus div 的意思是div是input的后代元素，而这显然是错的，因此无法匹配到。

css中父元素（或祖先元素）可以影响子元素（或后代元素），但反过来就不行，因为当多个选择器并存时，如果既存在子选择器，又存在父选择器，在逻辑上就会产混乱，因此在css不存在父选择器（或者祖先选择器）。

你这种需求，只能通过js来实现。

---