当前位置：首页 > Web前端 > CSS

伪类和伪元素的区别

时间：2023-03-30 15:04:51 CSS

在css2中定义如下：CSS伪类用于给某些选择器添加特殊效果。CSS伪元素用于为某些选择器添加特殊效果。伪类的目的是利用选择器找到DOM树中不存在的、常规CSS选择器无法获得的信息。第一点是关于获取DOM树中不存在的信息。比如标签：link、visited等，这些信息在DOM树结构中是不存在的，只能通过CSS选择器获取；第二点是获取常规CSS选择器获取不到的信息。比如伪类：target，它的作用是匹配文档（页面）的URI中某个标识符的target元素。target:URL带有锚点名称#后跟它指向文档中的特定元素。此链接元素是目标元素。:target选择器可用于选择当前活动的目标元素。

123

li:first-child类似于

和li.first-child一样，此时修改后的

元素还在文档树中。

123ul:first-letter类似

ul:first-letter修改时，元素不在文档树中。因此，伪类和伪元素的区别在于：没有在文档树之外创建元素。:first-childCSS伪类表示一组兄弟姐妹中的第一个元素。在level3实现中，被匹配的元素需要有父元素，而在level4实现中不需要：first-child匹配一个父元素的第一个子元素，可以说是firstinstructure子元素.p:first-child，一个常见的误解是这个选择器选择了p的第一个元素。伪类的本质是将一个幻想类与一个与伪类相关的元素联系起来。:first-of-type匹配第一个类型。类型指的是什么？它是冒号之前匹配的东西。例如，p:first-of-type指的是所有p元素中的第一个。这里不再局限于第一个子元素，只要是该类型的第一个元素即可。当然，这些元素的范围都属于同一个层次，即peers。同类型的选择器:last-child和:last-of-type，:nth-child(n)和:nth-of-type(n)也可以这样理解。伪元素伪元素包括：first-letter、:first-line、:before、:after等。所有伪元素都必须写在伪元素选择符的末尾。这样写会报错，p:first-letterem{}这是不允许的。

上一篇：CSS自动显示“全文”链接

下一篇：css-开发总结

伪类和伪元素的区别相关文章

最新推荐

猜你喜欢