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{
        
    }

    这是不允许的。

  • 相关阅读:
    Drupal 7.23:函数drupal_alter()注释
    请为我们的冷漠付费
    使用Drush管理Drupal站点
    Getting and installing the PEAR package manager
    CKEditor和IMCE构建drupal编辑器
    Drupal资源
    【转】为drupal初学者准备的12个精品课程
    OFBIZ+ECLIPSE
    OFBIZ安装
    CentOS6.4 利用sendEmail发邮件
  • 原文地址:https://www.cnblogs.com/10manongit/p/13039545.html
Copyright © 2011-2022 走看看