精华内容
下载资源
问答
  • 无论是伪还是伪元素,都属于CSS选择器的范畴。所以它们的定义可以在CSS标准的选择器章节找到。分别是 CSS2.1 Selectors CSS Selector Level 3,两者都已经是推荐标准。
  • 类和伪元素区别区别详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1、伪种类 2、伪元素种类 (1)伪作用对象是整个元素 例如: a:link {color:#111} a:...

    本篇文章给大家带来的内容是关于什么是伪类和伪元素?伪类和伪元素的区别的区别详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

     

    1、伪类种类

    0044-1.png

    2、伪元素种类

    0044-2.png

    (1)伪类作用对象是整个元素

    例如:

    a:link

    {color:#111}

    a:hover

    {color:#222}

    div:first-child

    {color:#333}

    div:nth-child(3)

    {color:#444}

    尽管这些条件不是基于DOM的,但结果每一个都是作用于一个完整的元素,比如整个链接,段落,div等等。

    (2)伪元素作用于元素的一部分

    p::first-line

    {color:#555}

    p::first-letter

    {color:#666}

    a::before

    {content : "hello

    world";}

    (3)伪元素作用于元素的一部分:一个段落的第一行或者第一个字母。

    总结:伪元素其实相当于伪造了一个元素,例如before,first-letter达到的效果就是伪造了一个元素,然后添加了其相应的效果而已;而伪类没有伪造元素,例如first-child只是给子元素添加样式而已。

    伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。

    但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。

    以上就是对什么是伪类和伪元素?伪类和伪元素的区别的区别详解的全部介绍,希望大家可以有所收获.

    展开全文
  • 类和伪元素区别

    千次阅读 多人点赞 2018-12-08 19:21:29
    在CSS1CSS2中对伪类和伪元素没有做出很明显的区别定义,而二者在语法是一样的,都是以:开头,这造成很多人会将某些伪元素误认为是伪,如:before,:after;而在CSS3给出的定义中,二者区别更为明显,也更容易理解...

    前言

    在CSS1和CSS2中对伪类和伪元素没有做出很明显的区别定义,而二者在语法是一样的,都是以:开头,这造成很多人会将某些伪元素误认为是伪类,如:before:after;而在CSS3给出的定义中,二者区别更为明显,也更容易理解。

    伪类

    伪类用于选择DOM树之外的信息,包含那些 匹配指定状态的元素 ,比如:visited:active;或是 不能用简单选择器进行表示的信息 ,后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child:first-of-type:target

    常用伪类有:

    SelectorMeaning
    :active选择正在被激活的元素(匹配指定状态)
    :hover选择被鼠标悬浮着的元素(匹配指定状态)
    :link选择未被访问的元素 (匹配指定状态)
    :visited选择已被访问的元素(匹配指定状态)
    :first-child选择满足是其父元素的第一个子元素的元素
    :lang(value)选择带有指定 lang 属性的元素
    :focus选择拥有键盘输入焦点的元素
    :enable选择每个已启动的元素
    :disable选择每个已禁止的元素
    :checked选择每个被选中的元素
    :target选择当前的锚点元素
    :first-of-type选择满足是其父元素的第一个某类型子元素的元素
    :last-of-type选择满足是其父元素的最后一个某类型子元素的元素
    :only-of-type选择满足是其父元素的唯一一个某类型子元素的元素
    :nth-of-type(n)选择满足是其父元素的第n个某类型子元素的元素
    :nth-last-of-type(n)选择满足是其父元素的倒数第n个某类型的元素
    :only-child选择满足是其父元素的唯一一个子元素的元素
    :last-child选择满足是其父元素的最后一个元素的元素
    :nth-child(n)选择满足是其父元素的第n个子元素的元素
    :nth-last-child(n)选择满足是其父元素的倒数第n个子元素的元素
    :empty选择满足没有子元素的元素
    :in-range选择满足值在指定范围内的元素
    :out-of-range选择值不在指定范围内的元素
    :invalid选择满足值为无效值的元素
    :valid选择满足值为有效值的元素
    :not(selector)选择不满足selector的元素
    :optional选择为可选项的表单元素,即没有“required”属性
    :read-only选择有"readonly"的表单元素
    :read-write选择没有"readonly"的表单元素
    :root选择根元素

    注意:
    p:first-child,表示选择的元素既要是p标签,又要是其父元素的第一个子元素,不要错认为是表示p元素的第一个子元素;
    同理,p:first-of-type表示选择的元素既要是p标签,又要是其父元素的第一个p标签元素。

    伪元素

    伪元素为DOM树没有定义的虚拟元素。不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容。比如::before表示选择元素内容的之前内容,也就是"";::selection表示选择元素被选中的内容。

    SelectorMeaning
    ::first-letter选择指定元素的第一个单词
    ::first-line选择指定元素的第一行
    ::after在指定元素的内容前面插入内容
    ::before在指定元素的内容后面插入内容
    ::selection选择指定元素中被用户选中的内容

    区别

    在CSS3中,伪元素以::开头,但因为CSS1、CSS2的历史原因,浏览器对以:开头的伪元素也继续支持,但建议规范书写为::开头。

    展开全文
  • 其实明白过来以后,再回头去想为什么自己...PS:本文不讨论伪元素和在书写等方面的区别。 1. 温故一下什么是元素,什么是 元素指的是 HTML 文档中的标签,它是 DOM 树的一部分。而是元素上的一个属性,是人...

    其实明白过来以后,再回头去想为什么自己会混淆伪元素(pseudo-elements)和伪类(pseudo-classes)的概念,反而会觉得难以理解。毕竟,单从名字就能一眼看出它们的区别,一个是假的元素,另一个是假的类。
    PS:本文不讨论伪元素和伪类在书写等方面的区别。

    1. 温故一下什么是元素,什么是类
    元素指的是 HTML 文档中的标签,它是 DOM 树的一部分。而类是元素上的一个属性,是人为规定的当前元素的一个类别。
    CSS 选择器有很多种。其中元素选择器说的是我们可以直接通过元素名称选中文档中的所有该元素,比如我们可以用 div 代表 HTML 文档中的所有 div 元素。类选择器说的是我们可以用类(元素的 class 属性)选中文档中所有包含该类的元素。

    2. 说说伪元素
    伪元素既然带一个“元素”,说明它和 p ,a ,h1 等一样,可以包裹住页面的一部分内容并对其中的内容施加一定的影响。
    比如,对于 <p>how good a day</p> ,我们可以在样式表中写 p {} 来选中该元素包裹的内容并设定某些样式。而伪元素与之类似,以 :first-letter 为例,就好像在 <p>how good a day</p> 中隐式地声明了一对儿新元素,包裹住了这段文本的首字母,即:<p><first-letter>h</first-letter>ow good a day</p> ,这样我们就可以在样式表中写 p:first-letter {} 来选中 p 元素里面的 first-letter 元素包裹的内容并设定样式了。
    伪元素既然还带一个“伪”,说明它其实在 DOM 树中并不存在,只是逻辑上存在所以我们抽象出来的一个元素而已。
    CSS 规范中讲:

    They are used to create abstractions about the document tree beyond those provided by the document tree.

    “它们被用来创建 DOM 树既有的元素之外的抽象元素”这句话就是表达了这个意思。
    所以,归根到底,伪元素只是假定 DOM 树中有那样一个元素。

    3. 再说说伪类
    一言以蔽之,文档树的某个元素上并没有某个类,但是就好像在某种条件下,这个元素上被声明了这个类一样。
    最典型的就是作用在 a 标签上的伪类 :hover,我们并没有在 a 元素上声明一个叫 hover 的类,但是当我们把鼠标悬停在 a 元素上时,这个 a 元素上就好像有一个 hover 类,代表光标悬停在这个 a 元素上那个时间点的 DOM 树中的 a 元素,有一种莫名穿越的感觉。
    还有一个生动的例子可以帮助我们分清伪元素和伪类,即 :first-child 容易被误解为“某个元素下的第一个子元素”,而其实它指的是当前元素就好像有一个“first-child”类,用来表明自己是其父元素里面的第一个子元素。


    4. 总结
    其实你看,既然一个是元素,一个是类,那么在样式表中,伪元素和它前面的元素体现出来的其实是一种元素和元素之间的位置关系,要么是某个元素内部最前面(:before)的子元素,要么是它内部最后面(:after)的子元素,要么是元素里面的段落的第一行(:first-line),要么是它里面的文本的首字母(:first-letter)。它们都是直接作用在DOM树上的,老子本身就是元素,在法律地位上和它前面的元素平级。而伪类和它前面的元素体现出来的是一种包含关系,依赖关系,该元素就好像拥有这个类,这个类就好像被加在这个元素上一样。伪类作用在DOM树上的元素上,只是用来描述这个类的状态的,和普通的 class 没有本质上的区别。所以,当我们看到 元素:伪元素这种形式的时候,CSS 样式必然最后作用在这个伪元素的位置上,而看到 元素:伪类的时候,CSS 样式必然最后作用在元素上。反过来,我们也可以通过最终的效果作用在什么上来判断它是伪元素还是伪类。
    所以如果有人再问 CSS 的伪元素和伪类有什么区别,你可以这样回答:
    “伪元素”和“伪类”都带一个“伪”字,那是他们的共同点,所以,他们的区别就是一个本质上是元素,另一个本质上是类。

     

    展开全文
  • 类和伪元素区别是什么?

    千次阅读 2020-10-07 15:54:17
    伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过::before来在一个元素前添加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些**文本实际不在文档树中**。 二、...

    一、两者的定义

    1.伪类(pseudo-class)是一个以冒号作为前缀,被添加到一个选择器末尾的关键字,当你希望样式在特定状态才被呈现到指定的元素时,你可以往元素的选择器后面加上对应的伪类。

    2.伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过::before来在一个元素前添加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际不在文档树中

    二、区别

    1.伪类是通过在元素选择器上加入伪类改变元素状态。

    2.伪元素通过对元素的操作进行对元素的改变。

    三、示例

    1.HTML&&CSS
    在这里插入图片描述

    2.效果
    在这里插入图片描述

    展开全文
  • 类和伪元素不是真正意义上的html存在的类和元素,他们的存在是为了方便对状态位置进行样式定义。具体他们之间有什么区别呢,这就是今天我们需要讨论的问题了
  • css伪伪元素区别1、伪(pseudo-classes)2、伪元素(Pseudo-elements)3、伪伪元素区别 1、伪(pseudo-classes) 其核心就是用来选择DOM树之外的信息不能够被普通选择器选择的文档之外的元素,用来添加...
  • css 伪类和伪元素的用法和区别

    千次阅读 2019-09-18 22:10:38
    一:什么是css伪? CSS pseudo-classes 伪的概念引入是为了能够表达在文档树语法之外无法...通过伪类和伪元素的配合使用,发挥想象力,可以实现很多复杂的特殊效果。可以在一定程度上避免使用js来操纵样式。
  • 伪元素是修饰不在文档树中的内容,什么是不存在于文档树中的?</p>
  • 简单了解伪类和伪元素区别

    千次阅读 2018-04-03 20:52:20
    使用伪元素的时候,总是感觉很相似,但又不能详细的说出两者的区别和联系,那么两者到底有什么区别和联系呢?下面我们就来聊聊两者,这个介绍的不多,主要还是聊聊伪元素的一些特点,这里不怎么写具体的实例,...
  • CSS伪伪元素

    万次阅读 多人点赞 2019-03-11 16:47:00
    也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或是列表中的第一个元素,又或者是鼠标悬停在某个超链接上时要设置的样式。 什么是伪伪元素? 伪:用于当已有元素处于的...
  • 在今天制作一个页面的时候碰到一个::after::before的东西,以前只知道这是一种选择器,至于具体该怎么用忘记掉了,又通过这个找到一些伪类和伪元素的概念,看完觉得有点摸不着头脑,现在想给大家浅显的说明白什么是伪...
  • 伪元素和区别总结

    万次阅读 多人点赞 2019-05-27 18:00:22
    其中伪类和伪元素的根本区别在于:它们是否创造了新的元素。 伪元素/伪对象:不存在在DOM文档中,是虚拟的元素,是创建新元素。代表某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。 ...
  • 伪元素 – 在内容元素的前后插入额外的元素或样式,但是这些元素实际上并不在文档中生成。 它们只在外部显示可见,但不会在文档的源代码中找到它们,因此,称为“伪”元素。例如: p::before {content:"第一章:";}...
  • (:)和伪元素(::)的区别

    千次阅读 2019-04-10 17:52:07
    类和伪元素都是CSS1CSS2中的概念,CSS1CSS2中对伪伪元素区别比较模糊,CSS3才对这两个概念做了相对较清晰的概念,下面看看css2css3中对这两个概念的定义: 伪 - pseudo classes CSS2中对伪的...
  • CSS的伪类和伪元素

    千次阅读 2021-01-17 13:44:05
    之前介绍了8种选择器,基本上可以应对大部分的开发需求,但是...伪元素和区别伪元素和都是为了给一些特殊需求加样式,定义上基本一致。伪选择器一样给已存在某个元素添加额外的样式;伪元素则是给自...
  • 类和伪元素区别,以及伪元素的妙用 小白程序员-博客第二篇 说到伪类和伪元素呢,这里可能就跟读者们唠叨一下啦,伪类和伪元素到底有什么渊源呢,上面文章说到伪元素可以清除浮动,其实呀,伪元素的功能不止于...
  • CSS伪元素能使我们添加案定的HTML元素之外的元素,这里我们就来解析CSS中的伪元素及其与伪区别,需要的朋友可以参考下
  • 类和伪元素区别

    2019-08-19 22:50:47
    类和伪元素区别,其实很简单,从字面上就可以理解。它们有一个共同的修饰词“伪”,那么“伪”是什么意思呢?就是假的呗。所以,伪就是假的伪元素就是假的元素,这就是在字面上它们之间的区别。下面我们再...
  • 伪元素实例

    2019-03-20 16:15:53
    https://mp.csdn.net/postedit/88689169 伪选择元素基于的是当前元素处于的状态,或者说是元素当前所具有的...伪元素是对元素中特定内容进行操作的,它所操作的层次比伪更深一层,也因此它的动态性比伪要低很多。
  • 一、伪类和伪元素的引入 CSS 引入伪类和伪元素的概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者是列表中的第一个元素。 二、伪的...
  • 关于css中的伪类和伪元素,一看就明白
  • 类和伪元素的异同 相同点: 伪类和伪元素存在的意义都是为了操作一些通过普通的CSS选择器无法直接取到的节点。它们都相当于CSS选择器的一种扩展。 在 CSS2 之前,伪类和伪元素的语法相同。selector.class:pseudo-...
  • CSS 伪类和伪元素以及权重比较

    千次阅读 2019-03-24 15:54:26
    伪元素:注意伪元素是代表一元素 权重比较 共分为4个等级: 第一等:代表内联样式,如: style="xxx",权值为1000。 第二等:代表ID选择器,如:#content,权值为100。 第三等:代表,伪类和属性选择器,...
  • 虽互不曾谋面,但希望能您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder)如果不知...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 204,186
精华内容 81,674
关键字:

伪元素和伪类的区别

友情链接: ConnectScan.rar