zoukankan      html  css  js  c++  java
  • 伪类和伪元素的区别

    在css2中是这样定义二者的:

    CSS 伪类用于向某些选择器添加特殊的效果。

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

    伪类存在的意义是为了通过选择器找到那些不存在DOM树中的信息以及不能被常规CSS选择器获取到的信息。

    第一点讲的是获取不存在与DOM树中的信息。比如<a>标签的:link、visited等,这些信息不存在与DOM树结构中,只能通过CSS选择器来获取;

    第二点讲的是获取不能被常规CSS选择器获取的信息。比如伪类:target,它的作用是匹配文档(页面)的URI中某个标志符的目标元素。

    target:URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
    :target 选择器可用于选取当前活动的目标元素。

    <ul>
        <li>123</li>
        <li></li>
    </ul>

    li:first-child类似于

    <ul>
        <li class="first-child">123</li>
        <li></li>
    </ul>

    li.first-child 一样
    这个时候,被修饰的<li>元素依然处于文档树中。

    <ul>
        123
    </ul>

    ul:first-letter类似于

    <ul>
        <span class="first-letter">1</li>
        23
    </ul>

    ul:first-letter被修饰的时候,<span>元素并不处于文档树中。

    因此,伪类与伪元素的区别在于:有没有创建一个文档树之外的元素。

    image

    :first-child CSS伪类

    代表了一组兄弟元素中的第一个元素。在level3实现中,被匹配的元素需要具有一个父级元素,而在level4实现中则不需要

    :first-child 匹配的是某父元素的第一个子元素,可以说是结构上的第一个子元素。

    p:first-child,常见的错误理解是这个选择器是选择p的第一个元素。

    伪类的实质就是把某种幻想类关联到某种伪类相关的元素中。

    :first-of-type 匹配的是该类型的第一个,类型是指什么呢,就是冒号前面匹配到的东西,比如 p:first-of-type,就是指所有p元素中的第一个。这里不再限制是第一个子元素了,只要是该类型元素的第一个就行了,当然这些元素的范围都是属于同一级的,也就是同辈的。

    同样类型的选择器 :last-child 和 :last-of-type、:nth-child(n) 和 :nth-of-type(n) 也可以这样去理解。

    伪元素

    伪元素包括:first-letter, :first-line, :before ,:after等

    所有的伪元素都要写在伪元素选择器的最后面,如果这样写就会出错,

    p:first-letter em{
        
    }

    这是不允许的。

  • 相关阅读:
    PNG文件格式具体解释
    opencv2对读书笔记——使用均值漂移算法查找物体
    Jackson的Json转换
    Java实现 蓝桥杯VIP 算法训练 装箱问题
    Java实现 蓝桥杯VIP 算法训练 装箱问题
    Java实现 蓝桥杯VIP 算法训练 单词接龙
    Java实现 蓝桥杯VIP 算法训练 单词接龙
    Java实现 蓝桥杯VIP 算法训练 方格取数
    Java实现 蓝桥杯VIP 算法训练 方格取数
    Java实现 蓝桥杯VIP 算法训练 单词接龙
  • 原文地址:https://www.cnblogs.com/10manongit/p/13039545.html
Copyright © 2011-2022 走看看