css伪类与伪元素区别

伪类

伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰。
伪类选择元素基于的是当前元素处于的状态，或者说元素当前所具有的特性，而不是元素的id、class、属性等静态的标志。由于状态是动态变化的，所以一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

特点：
1.获取不存在与DOM树中的信息。比如a标签的:link、visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；
2.获取不能被常规CSS选择器获取的信息。
3.使用单冒号：

伪元素

伪元素，是在 DOM 树中创建了一些抽象元素，这些抽象元素是不存在于文档流中的。

伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，也因此它的动态性比伪类要低得多。实际上，设计伪元素的目的就是去选取诸如元素内容第一个字（母）、第一行，选取某些内容前面或后面这种普通的选择器无法完成的工作。它控制的内容实际上和元素是相同的，但是它本身只是基于元素的抽象，并不存在于文档中，所以叫伪元素。

特点：
1.css3规定使用双冒号（::）表示
2.由于兼容性问题，所以现在大部分还是统一单冒号（:），因为除了IE8及其以下版本不支持双冒号（::）外，其他都支持。
常见的几种伪元素是: :after , :before 以及 :first-letter。

根本区别：是否创建了新元素

css伪类与伪元素区别相关推荐

详解 CSS 属性 - 伪类和伪元素的区别
2019独角兽企业重金招聘Python工程师标准>>> CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择 ...
css中伪类与伪元素的区别
一:伪类: 1:定义:css伪类用于向某些选择器添加特殊效果. 伪类其实与普通的css类相类似,可以为已有的元素添加样式,但是他只有处于dom无法描述的状态下才能为文档树中的元素添加样式,所以将其称为 ...
CSS 属性 - 伪类和伪元素的区别
伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示. :Pseudo-classes : ...
十三、CSS 3新特性详解（一）——属性、结构伪类、伪元素选择器，nth-child与nth-of-type区别，2D rotate，calc函数、滤镜filter、过渡transition
七.CSS3 属性选择器(上) 什么是 CSS3 在 CSS2 的基础上拓展.新增的样式 CSS3 发展现状移动端支持优于 PC 端 CSS3 目前还草案,在不断改进中 CSS3 相对 H5,应用非 ...
css伪类和伪元素的特性和区别
伪元素是真的有元素前者是单冒号,后者是双冒号总结一下伪类与伪元素的特性及其区别: 伪类本质上是为了弥补常规CSS选择器的不足,以便获取到更多信息: 伪元素本质上是创建了一个有内容的虚拟容器: CS ...
css伪类与伪元素的区别
css伪类与伪元素的区别 1.伪类(pseudo-classes) 2.伪元素(Pseudo-elements) 3.伪类与伪元素的区别 1.伪类(pseudo-classes) 其核心就是用来选择D ...
CSS之 :before :after的用法，伪类和伪元素的区别
一::before && :after的用法 :before 如同对伪元素的名称一样,:before 是用来给指定的元素的内容前面插入新的内容.举例说明: .before:before ...
css伪类和伪元素的区别
1.伪类伪类选择元素基于的是当前元素处于的状态,或者说元素当前所具有的特性,而不是元素的id.class.属性([])等静态的标志.由于状态是动态变化的,所以一个元素达到一个特定状态时,它可能得到一 ...
css3和css伪类和伪元素区别与兼容性
单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素. 伪元素由双冒号和伪元素名称组成.双冒号是在当前规范中引入的,用于区分伪类和伪元素.但是伪类兼容现存样式,浏览器需要同时支持旧的伪类,比 ...
css 伪类和伪元素区别
关于伪类和伪元素,一直有点不清楚,今天是时候好好翻翻了,势必得整的明明白白的之前看了一个博客说,伪元素是创建了一个新的元素且只是逻辑上的创建,DOM并不存在,没有办法使用JS去获取,而伪类是一个已经 ...

css伪类与伪元素区别

伪类

伪元素

css伪类与伪元素区别相关推荐

最新文章

热门文章