1.什么是伪元素？

创建一些不在文档树中的元素，并为其添加样式。选择器

注意： 使用::before ::after ； 一定要有content:'' ; 可以为空，可以为竖线｜，可以为url图片；display:block后可以设置宽高，可以position:relative后 改变位置;可以transform：rotate（45deg）等

常见的伪元素有哪些？

(有些伪元素也可以只用一个冒号，但为区分，还是双冒号表示伪元素)

  • ::before
  • ::after
  • ::first-letter
  • ::first-line 一个元素中只能有一个伪元素，且可以跟在伪类后面使用。

alt

alt

2.什么是伪类？

为处于某个状态的已有元素添加对应的样式，这个状态是根据用户行为而动态改变的。

它可以用于

  • 设置鼠标悬停在元素上时的样式
  • 为已访问和未访问链接设置不同的样式
  • 设置元素获得焦点时的样式
状态伪类
基于元素当前状态进行选择的
元素的样式会根据其状态呈现不同的样式，当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。

:link
:hover		鼠标悬停
:active
:visited
:focus		键盘输入焦点

这几个伪类同时出现在一个元素的操作上，顺序不能改变，否则很大程度上会产生紊乱，造成效果失效！
a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效。(意思是必须先写a:link 和 a:visited再写 :hover）
a:active 必须在 CSS 定义中的 a:hover 之后才能生效。(意思是必须先写a:hover再写 :active）
另外伪类名称对大小写并不敏感


伪类和css类

.text:hover{
	color:blue
}
结构伪类

利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。

alt

更多例子

我的实践：

alt

alt

alt