zoukankan      html  css  js  c++  java
  • CSS 之pseudo-classes 与pseudo-element的异同

    从W3School找到相关资料如下:

    伪类:

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

    伪类由一个冒号:开头,冒号后面是伪类的名称和包含在圆括号中的可选参数。

    任何常规选择器可以再任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥,另外一些伪类可以同时被同一个元素使用。并且,为了满足用户在操作DOM时产生的DOM结构改变,伪类也可以是动态的。

    伪元素:

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

    伪元素的由两个冒号::开头,然后是伪元素的名称。

    使用两个冒号::是为了区别伪类和伪元素(CSS2中并没有区别)。当然,考虑到兼容性,CSS2中已存的伪元素仍然可以使用一个冒号:的语法,但是CSS3中新增的伪元素必须使用两个冒号::

    一个选择器只能使用一个伪元素,并且伪元素必须处于选择器语句的最后。

    注:不排除未来会加入同时使用多个伪元素的机制。

    我的理解,总结一下就是:

    pseudo-classes(伪类)

      伪类选择元素主要是基于元素当前的状态,具有相当的灵活性,广泛性。当元素处于某种特殊状态时,该元素将变成特定的样式,且可同时可作用于多个具有该状态的元素。而当状态改变,其样式将不再作用于该元素。

    pseudo-element(伪元素)

      伪元素是对元素中特定内容进行操作,它的操作层及灵活性都比伪类低。但正是基于此特点,它的名字才叫伪元素。伪元素的主要工作是针对元素内容的某个开头,某一行,某个字,代替了普通选择器,完成对这些特定部位的样式改变。

     

  • 相关阅读:
    HDU 4289 Control [网络流拆点]
    HDU 4292 Food [网络流]
    HDU 4284 Travel [TSP]
    HDU 4291 A Short problem [矩阵]
    通过100个单词掌握英语语法(四十一)make
    通过100个单词掌握英语语法(四十二)may
    通过100个单词掌握英语语法(四十六)much
    通过100个单词掌握英语语法(四十七)my
    通过100个单词掌握英语语法(四十八)need
    通过100个单词掌握英语语法(四十五)most
  • 原文地址:https://www.cnblogs.com/abcdecsf/p/9808077.html
Copyright © 2011-2022 走看看