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

时间:2017-01-26 05:55:04

标签: css css-selectors pseudo-element

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

  

双结肠和单结肠符号是要区分的   伪类和伪元素。

上述陈述的实际含义是什么?

2 个答案:

答案 0 :(得分:39)

来自https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements

伪类:

  

CSS伪类是一个关键字,以冒号(:)开头,添加到选择器的末尾以指定要为所选元素设置样式, 仅在它们处于某种状态时 即可。例如,您可能希望仅在鼠标指针悬停元素时设置元素样式,或者在禁用或选中它时使用复选框,或者在DOM树中作为其父元素的第一个子元素。

示例:

  • :活性
  • :检查
  • :第n个孩子()
  • :第一
  • :悬停

伪元素::

  

伪元素非常类似伪类,但它们有差异。它们是关键字,这次前面有两个冒号(::),可以添加到选择器 的末尾以选择元素的某个部分

示例:

  • 后::
  • ::前
  • ::第一字母
  • ::一线
  • ::选择
  • ::背景

答案 1 :(得分:8)

伪类: 它由浏览器自动应用 取决于元素的位置或其交互状态。

例如:

E:hover匹配光标所在的E类元素 徘徊在它上面。

伪元素 它将样式应用于内容 基于它在HTML层次结构中的位置。

例如:

E::first-letter这会将样式应用于块级内第一行的第一个字母 要素E.

所以,

CSS3选择器规范使用两个冒号而不是一个冒号前缀伪元素。 所以,:第一个字母变成::第一个字母,第一个字母变成::第一个字母。 IE 8及更早版本不了解双冒号前缀,因此需要使用 单冒号版本,以避免旧浏览器中的样式中断。