image.png
什么是伪类？什么是伪元素？
比如，你要把被鼠标悬停的链接变成黄色，你应该怎么选择这个被鼠标悬停的链接？ 链接都是a标签，问题是链接有很多种状态，被访问过的，没被访问过的，诸如此类。就需要下一级菜单进行更精确的区分。因此创建了伪类。
什么是伪元素呢？一个现实需求就是比如说如何选择所有的偶数行文字？如何选择每一段的第一个文字？
例子
伪类.
如下。注意。伪类都是以冒号开头的。
a.red:visited {color: #FF0000;}
<a class="red" href="css_syntax.asp">CSS Syntax</a>
伪元素
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
伪类和伪元素的根本不同在于什么地方？
伪类和伪元素提出的意义？
伪元素在DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为html源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。
比如，以first-line伪元素为例，这个如果没有这个选择器，那么怎么实现？那就只有用js了，而用js那就很麻烦了~
什么时候用伪类？
其他选择器搞不定的时候。最后才考虑伪类。
css3新增了哪些伪类？
举个例子first-of-type也就是选择父元素的首个。也就是第一个。p
<!DOCTYPE html>
<html>
<head>
<style>
p:first-of-type
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>这是第一个段落。</p>
<p>这是第二个段落。</p>
<p>这是第三个段落。</p>
<p>这是第四个段落。</p>
</body>
</html>
结果是
image.png
再比如选择空的p。用empty选择器。
W3School在线测试工具 V2
过滤选择器和伪类选择器什么关系？
过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同。
据我观察，过滤选择器一般是jquery中的叫法。css中一般叫做伪类选择器。不过也有人把jquery中的叫做伪类选择器。
比如jquery选择第一个元素是
:first
选取第一个元素（单个元素）
$('li:first')
css则是
li:first-child
还是有些区别的。
css3新增选择器的侧重点在哪？？
主要是关于结构类的选择器。
image.png
网友评论