CSS Pseudo-Classes And Pseudo-Elements

image.png

什么是伪类？什么是伪元素？

比如，你要把被鼠标悬停的链接变成黄色，你应该怎么选择这个被鼠标悬停的链接？ 链接都是a标签，问题是链接有很多种状态，被访问过的，没被访问过的，诸如此类。就需要下一级菜单进行更精确的区分。因此创建了伪类。

什么是伪元素呢？一个现实需求就是比如说如何选择所有的偶数行文字？如何选择每一段的第一个文字？

例子

伪类.

如下。注意。伪类都是以冒号开头的。

a.red:visited {color: #FF0000;}

CSS Syntax

伪元素

p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }

伪类和伪元素的根本不同在于什么地方？

CSS3伪类和伪元素的特性和区别 - 才子锅锅 - 博客园

伪类和伪元素提出的意义？

伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。

比如，以first-line伪元素为例，这个如果没有这个选择器，那么怎么实现？那就只有用js了，而用js那就很麻烦了~

什么时候用伪类？

其他选择器搞不定的时候。最后才考虑伪类。

css3新增了哪些伪类？

举个例子first-of-type也就是选择父元素的首个。也就是第一个。p

这是标题

这是第一个段落。
这是第二个段落。
这是第三个段落。
这是第四个段落。

结果是

image.png

再比如选择空的p。用empty选择器。
W3School在线测试工具 V2

过滤选择器和伪类选择器什么关系？

过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同。

据我观察，过滤选择器一般是jquery中的叫法。css中一般叫做伪类选择器。不过也有人把jquery中的叫做伪类选择器。
比如jquery选择第一个元素是

:first
选取第一个元素（单个元素）
$('li:first')

css则是

li:first-child

还是有些区别的。

css3新增选择器的侧重点在哪？？

主要是关于结构类的选择器。

image.png

参考

CSS 伪元素
CSS中伪类及伪元素用法详解 - Daryl - 博客园