当前位置: 首页 > 面试题库 >

伪类和伪元素之间有什么区别?

张嘉佑
2023-03-14
问题内容

div::after {}和之间有什么区别div:after {}?我们什么时候必须使用:::

双冒号和单冒号表示法是区分伪类和伪元素

以上声明的实际含义是什么?


问题答案:

伪类:

CSS伪类是关键字,其前面带有一个冒号(:),并添加到选择器的末尾,以指定要对选定元素进行样式设置( 仅当它们处于特定状态时)
。例如,您可能只想在元素被鼠标指针悬停时设置样式,或者在元素被禁用或选中时选中一个复选框,或者是作为其父元素在DOM树中的第一个子元素的元素。

例子:

  • :active
  • :checked
  • :nth-child()
  • :first
  • :hover

伪元素::

伪元素与伪类非常相似,但是它们有所不同。它们是关键字,这次是两个冒号(::)开头,可以将其添加到选择器的末尾 以选择元素的特定部分

例子:

  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::selection
  • ::backdrop

如@stephanmg所述:

实际上,由于浏览器的兼容性,:: before用作:before,而::
after用作:after。两者都是伪元素,但看起来像伪类。如果您阅读CSS代码,这可能会造成混淆。



 类似资料:
  • 本文向大家介绍CSS的伪类和伪对象有什么不同?相关面试题,主要包含被问及CSS的伪类和伪对象有什么不同?时的应答技巧和注意事项,需要的朋友参考一下 伪类:我们常用的比如,hover,focus等,我认为伪类是为了弥补选择器的不足。还有伪类选择器,比如first-child,nth-child. 伪元素 : ::before ::after 是为了创建一个dom元素,使用content属性指定要插入

  • 问题内容: 我有一个:before开头的’quote’和一个:after结束的报价。 现在,我想要的是一个:after:after供“引用”参考,但我无法使其正常工作。 有人知道这是否可能吗? 到目前为止,我的代码: 问题答案: 已经提出了嵌套和伪元素的想法;请参阅“生成和替换的内容”模块的这一部分。但是,该模块已被放弃,等待完全重写,因此在重新发布该文档之前,我不会屏息。即便如此,嵌套内容伪元素

  • 主要内容:1. ::after,2. ::before,3. ::first-letter,4. ::first-line,5. ::selection,6. ::placeholder伪元素是一个附加在选择器末尾的关键词,通过伪元素您不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。例如通过伪元素您可以设置段落中第一个字母的样式,或者在元素之前、之后插入一些内容等等。 在 CSS1 和 CSS2 中,伪元素的使用与伪类相同,都是使一个冒号 与选择器相连。但在 C

  • CSS伪元素是用来添加一些选择器的特殊效果。 语法 伪元素的语法:selector:pseudo-element {property:value;} CSS类也可以使用伪元素:selector.class:pseudo-element {property:value;} :first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式。 在下面的例子中,浏览器会根据 "

  • 本文向大家介绍算法和伪代码之间的区别,包括了算法和伪代码之间的区别的使用技巧和注意事项,需要的朋友参考一下 在这篇文章中,我们将了解算法和伪代码之间的区别- 算法 它被定义为一系列明确定义的步骤。 这些步骤提供了解决现有问题的解决方案/方法。 这是一种系统且逻辑的方法,其中过程是逐步定义的。 它为特定问题提供了解决方案。 该解决方案将转换为机器代码,然后由系统执行以提供相关的输出。 结合了许多简单

  • 问题内容: 我对了解何时可以将和伪元素应用于自动关闭标签特别感兴趣。根据W3生成的内容CSS规范,这是这些伪元素的定义: 12.1:before和:after伪元素 :作者使用 :before和:after伪元素 指定生成内容的样式和位置。顾名思义,:before和:after伪元素指定元素的文档树内容之前和之后的内容位置。“ content”属性与这些伪元素一起指定了要插入的内容。 基于此,这些