伪类与伪元素

伪类

伪类包含两种：状态伪类（UI 伪类）和结构性伪类。

状态伪类

是基于元素当前状态进行选择的，当元素处于某状态时会呈现该样式,包括

• :link 应用于未被访问过的链接；
• :hover 应用于鼠标悬停到的元素；
• :active 应用于被激活的元素；
• :visited 应用于被访问过的链接，与:link 互斥。
• :focus 应用于拥有键盘输入焦点的元素。
• :target 应用于链接点击后指向元素

注意：

需要按照这里列出的顺序使用它们

<ahref="#more_info"
  > MoreInformation</a
  > <h2id="more_info"
  > Thisistheinformationyouarelookingfor.
  </h2
  > #more_info:target {
  background: #eee;
}

会在用户单击链接转向 ID 为 more_info 的元素时，为该元素添加浅灰色背景。

结构性伪类，是 css3 新增选择器

利用 dom 树进行元素过滤，通过文档结构的互相关系来匹配元素，不需要通过 class 和 id 属性绑定元素，使文档结构更简洁。包括–

:first-child选择某个元素的第一个子元素；: last-child选择某个元素的最后一个子元素；;

伪元素

• 诸如**:before和:after**两个伪元素发布于 CSS2.1 中。
• 在最初，伪元素的语法是使用“:”（一个冒号），但 CSS3 新标准规定伪元素使用“::”（两个冒号），以区分伪元素和伪类（比如:hover，:active 等）
• 实际上，因为伪元素在 CSS3 新标准之前是用的一个冒号，它是旧标准，所以只用一个冒号表示伪元素，能够获得更好的浏览器兼容性，虽然不符 CSS3 规范。
• 默认生成的伪元素是一个 inline元素，要给它设置 size，需要先定义 display 为块级
• 需要配合 content 使用，不需要它有内容时往往会设置它为空格

content和attr配合使用

如果你不想把content内容在 CSS 里写死，那你可以使用attr表达式来从页面元素中动态的获取内容：

/* <div data-line="1"></div> */
div[data-line]:after {  //此处[data-line]可以省略
	content: attr(data-line); /* 属性名称上不要加引号！ */
}

• 它不会干扰现有的 HTML 结构（dom 树）！

区分二者

伪类（结构伪类）的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

就像：

伪元素将会在内容元素的前后插入额外的元素，因此当我们添加它们时，使用以下的标记方式，他们在技术上是平等的。

1 2 3 4 5	:before This the main content. :after

伪元素应用

伪元素表现上就像是“真正”的元素，我们能够给它们添加任何样式，比如改变它们的颜色、添加背景色、调整字体大小、调整它们中的文本等等

关联背景图像

我们也可以用图片替换内容 content而不是只有纯文本。尽管 content 属性提供了url()来插入图片, 但是在更多的实例中，我更倾向于使用背景（background）属性从而更好的控制图片。

添加过渡效果

我们甚至可以在伪元素上应用 transition 属性来创建优美的颜色过渡效果。

1 2 3 4	transition: all 350ms; -o-transition: all 350ms; -moz-transition: all 350ms; -webkit-transition: all 350ms;

迷人的阴影

使用 伪元素:before和:after。它们两个都是绝对定位，而且使用负 z-index 来放置到图片后方实现阴影效果。

详见：http://www.divcss5.com/rumen/r56313.shtml

https://www.cnblogs.com/ranzige/p/4554484.html