关于伪类和伪元素的理解

最新推荐文章于 2021-03-06 20:39:14 发布

奥特蛋_mm

最新推荐文章于 2021-03-06 20:39:14 发布

阅读量246

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43254676/article/details/99412331

版权

前端专栏收录该内容

13 篇文章 2 订阅

订阅专栏

伪类

The pseudo-class concept is introduced to permit selection based on information that lies outside of the document tree or that cannot be expressed using the other simple selectors.

翻译：
引入伪类概念以允许基于位于文档树之外的信息或者不能使用其他简单选择器表达的信息进行选择。

伪类的两种使用场景为：

1.dom树之外，比如：标签的 :hover :visited 这些不存在于dom树的使用场景。

2.不能使用简单选择器选择，比如：ul标签下li标签中第n个元素的选取场景。

伪元素

Pseudo-elements create abstractions about the document tree beyond those specified by the document language. For instance, document languages do not offer mechanisms to access the first letter or first line of an element’s content. Pseudo-elements allow authors to refer to this otherwise inaccessible information. Pseudo-elements may also provide authors a way to refer to content that does not exist in the source document (e.g., the ::before and ::after pseudo-elements give access to generated content).

翻译：
伪元素创建关于文档树的抽象，超出文档语言指定的抽象。例如，文档语言不提供访问元素内容的第一个字母或第一行的机制。伪元素允许作者参考这个否则无法访问的信息。伪元素还可以为作者提供引用源文档中不存在的内容的方式（例如，:: before和:: after伪元素允许访问生成的内容）。

伪类的常见使用

1.表示状态

:link a标签的默认状态

:hover a标签的悬浮状态

:active a标签被选中的状态

:visited a标签被点击后的状态

:focus input获取焦点的状态

2.结构化

ul中li标签伪类的使用，常用于子元素的选择

:first-child 选择第一项子元素

:last-child 选择最后一项子元素

:nth-child 选择第n项子元素，下边介绍相关nth-child更灵活的用法

伪元素的常见使用

::before 在元素的内容前插入内容

::after 在元素的内容后插入内容

伪元素的使用示例：

::before 或 ::after 插入的内容可以是文字或者图片。

1.插入文字


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			p::before{content: "AA";}
		</style>
	</head>
	<body>
		<p>这是伪元素::before的使用示例</p>
	</body>
</html>

运行结果如下：
在这里插入图片描述

2.插入图片

p::before{content: url(img/avatar.png);}

运行结果如下：
在这里插入图片描述

关于伪元素的使用有以下几点注意事项：

1.插入的内容需包含在content中，content不可省略，即使只是使用伪元素进行占位，可以设置content: " "，但是不可省略。

2.插入文字，则content:“AA”，需要使用引号，插入图片，则content: url(img/1.png)，不适用引号,插入图片的时候路径部分被引号引起来则插入的是路径文字，而非图片。

3.通过伪元素插入的内容，在页面源码中不可见，只有css中可见。

4.伪元素插入的位置，从结果上看是插入内容到元素前或元素后，实际上，插入的内容属于元素内，下边使用一个例子说明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			p {padding: 20px;margin: 20px; border: 1px solid #aaa;}
			p::before{content: "AA";border: 1px solid #aaa;padding: 10px;margin: 10px;}
		</style>
	</head>
	<body>
		<p>这是伪元素::before的使用示例</p>
	</body>
</html>