22、深入探索CSS高级特性

深入探索CSS高级特性

1. :focus和:active伪类

当用户与页面元素进行交互时，元素需要获得焦点，例如链接和表单控件。当元素获得焦点时，浏览器通常会改变其外观。 :focus 伪类允许我们在元素获得焦点时为其添加额外的样式规则，使其更加突出。而 :active 伪类则允许我们在元素被激活（如用户点击链接）时应用额外的样式。

以下是一个示例，展示了如何在 <input> 元素获得焦点时改变其背景颜色：

input {
  border : none;
  background-color : #dddddd;
}
input:focus {
  background-color : #c4c4c4;
}

这个示例可以帮助用户在填写表单时清楚地知道当前正在填写的是哪个字段。需要注意的是，IE8 是第一个支持 :focus 伪类的 IE 版本，其他主流浏览器早已支持该伪类。

2. 生成内容

CSS2 引入了一种强大的方式，可以在指定元素之前或之后添加内容，即使这些内容不在 HTML 文档中。通过使用 :before 和 :after 伪元素，并结合 content 属性，我们可以向文档中插入指定的内容。

2.1 :before和:after伪元素

:before