怎么区分伪类和伪元素?:before和::before又是什么鬼?

字面上区分

伪类和伪元素都有一个共同的修饰词“伪”,“伪”是什么意思?就是假的呗。所以伪类就是假的类,伪元素就是假的元素,这就是在字面上区分它们。那么我们再进一步更好的区分一下。

伪类

伪类存在的意义是为了通过选择器,格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。(CS3给出的定义,翻译过来)
所以我们从上面知道伪类的功能有两个:

伪类例子

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style>
	 p:first-of-type {
	  color: red;  // 

标签的内容变为红色 } style> head> <body> <div class="one"> <h1>h1文本h1> <p>p文本p> <p>第二个p文本p> div> body> html>

怎么区分伪类和伪元素?:before和::before又是什么鬼?_第1张图片
这里我们可以看到伪类弥补了选择器的不足,让我们可以专门操作第一个子元素。

伪元素

伪元素可以创建一些文档语言无法创建的虚拟元素。 比如:文档语言没有一种机制可以描述元素内容的第一个字母或第一行,但伪元素可以做到(::first-letter、::first-line)。同时,伪元素还可以创建源文档不存在的内容,比如使用 ::before::after。(CS3给出的定义,翻译过来)

伪元素例子

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style>
		.first-letter {
		  color: red; //首个字母会变红色
		}
style>
head>
<body>
<p>
<span class="first-letter">Hspan>ello, World
p>
body>
html>

怎么区分伪类和伪元素?:before和::before又是什么鬼?_第2张图片
和下面这段代码得出的结果也是一样的


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Documenttitle>
	<style>
		p::first-letter {
		  color: red;
		}
style>
head>
<body>
<p>
Hello, World
p>
body>
html>

而伪元素本质上是创建了一个虚拟容器(元素),我们可以在其中添加内容或样式。

所以简单来说,区分伪类和伪元素就是:伪类是相当于给元素添加一个类选择器,而伪元素就是给元素添加一个标签,使得它们能够更准确容易被操作(添加样式等)。(我自己的理解)

除了上面这个本质区别以外,在CSS3中,伪类用单冒号:表示;而伪元素用双冒号::表示。一个选择器可以同时使用多个伪类(但有的伪类会互斥);而一个选择器只能同时使用一个伪元素(未来的版本可能会支持多伪元素)。

:before和::before的区别

一看到这个我还有点懵逼,这是乍回事啊,不是才刚说完单引号和双引号用来区分伪类和伪元素吗?::before不是伪元素吗?::before 代表生成的内容元素,表示相应元素的可抽象样式的第一个子元素,即:所选元素的第一个子元素 利用::before可以把需插入的内容插入到元素的其他内容之前,并且默认内联显示。::before需要使用content属性来指定内容的值。这就把我搞晕了,所以我又去查了一下,发现这是CSS版本问题。

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。伪元素和伪类之所以这么容易混淆,是因为他们的效果类似而且写法相仿,但实际上 css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示。但因为兼容性的问题,所以现在大部分还是统一的单冒号,但是抛开兼容性的问题,我们在书写时应该尽可能养成好习惯,区分两者。
双冒号是在当前规范中引入的,用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存 在的伪元素写法,比如:first-line、:first-letter、:before、:after等,而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号的写法。
那么现在就可以完整的回答标题中的问题了,对于CSS2之前已有的伪元素,比如:before,单冒号和双冒号的写法::before作用是一样的。
所以,如果你的网站只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全。

新增伪类有哪些

  • :link、:visited、:hover、:active 这四个比较简单就不多说了(在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。a:active 必须被置于 a:hover 之后,才是有效的。)
  • :first-of-type p:first-of-type 选择属于其父元素的首个

    元素的每个

    元素。

  • :last-of-type p:last-of-type 选择属于其父元素的最后

    元素的每个

    元素。

  • :only-of-type p:only-of-type 选择属于其父元素唯一的

    元素的每个

    元素。

  • :only-child p:only-child 选择属于其父元素的唯一子元素的每个

    元素。

  • :nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素的每个

    元素。

  • :nth-last-child(n) p:nth-last-child(2) 同上,从最后一个子元素开始计数。
  • :nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个

    元素的每个

    元素。

  • :nth-last-of-type(n) p:nth-last-of-type(2) 同上,但是从最后一个子元素开始计数。
  • :last-child p:last-child 选择属于其父元素最后一个子元素每个

    元素。

  • :root :root 选择文档的根元素。
  • :empty p:empty 选择没有子元素的每个

    元素(包括文本节点)。

  • :target #news:target 选择当前活动的 #news 元素。
  • :enabled input:enabled 选择每个启用的 元素。
  • :disabled input:disabled 选择每个禁用的 元素
  • :checked input:checked 选择每个被选中的 元素。
  • :not(selector) :not§ 选择非

    元素的每个元素。

  • ::selection ::selection 选择被用户选取的元素部分。

这里面新增的伪类挺多的,一开始看几遍过不久就忘了,所以就自己写个博客存起来,忘记就过来看看_

常用伪元素

  • ::before 该伪元素定义在元素之前添加内容
  • ::after 该伪元素定义在元素之后添加内容
  • ::first-line 该伪元素向文本的首行添加特殊样式
  • ::first-letter 该伪元素向文本的第一个字母添加特殊样式

本文参考了以下文章:

  • 我终于理解了伪类和伪元素

你可能感兴趣的:(CSS)