Web前端开发技术

Appearance

伪类、伪元素与内容生成 ​

元信息 ​

  • 目标：掌握不改文档结构而改变样式与内容的三种手段——伪类、伪元素与内容生成，以 clearfix 为完整案例体会"结构零侵入"的样式方案
  • 关键概念：伪类、伪元素、内容生成、clearfix、:first-letter
  • 关联阶段：cp1
  • 常见误区：以为 :hover/:visited 是设计师在 HTML 里定义的类（伪类由浏览器按运行状态即时定义）；以为选择器只能选中标记元素（伪元素能筛选到字符、行这样的内容级"伪"元素）

​

伪类、伪元素与内容生成

浮动清除的旧方法 ​

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

旧式清除浮动的方法,语义上不够整洁，因为多出了一个无意义的内容为空的元素

浮动清除的新方法: 伪元素 ​

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

定义一个clearfix的css类，然后设置给父元素即可. 即简洁,又可重用 这段代码使用了css的几个特性：伪类、伪元素、内容生成

伪类 ​

css
a:link {color: blue;} /* 未访问的链接 */
a:visited {color: red;} /* 已访问的链接 */
a:hover {color: black;} /* 鼠标划过链接 */
a:active {color: yellow;} /* 已选中的链接 */

所谓伪类,就是无法由设计师定义,而是由浏览器根据实时运行状态定义的类.譬如上例表示:

  • 一个从未被上前用户访问过的链接显示为蓝色字体并带有下划线
  • 曾被访问过的链接显示为紫色并带有下划线
  • 当鼠标划过链接时，显示为黑色
  • 当链接被点击时，链接显示为黄色并带有下划线

上述链接种种不同的状态，就好象浏览器内部有如下代码：

css
<a class="link">未访问过的链接</a>
<a class="visited">已访问过的链接</a>
<a class="hover">鼠标划过链接</a>
<a class="active">已选中的链接</a>

伪元素 ​

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>
Open on CodeSandboxOpen Sandbox

普通选择器只能筛选标记元素,而伪元素选择器支持对内容元素进行筛选.

上例中，筛选出<p>中元素的第一个字符(即T字符)或第一行.而这段被选中的内容元素,并非是由文档作者预先进行标记的.所以,是伪的元素

内容生成 ​

css
.clearfix:before,.clearfix:after {
  content: " ";
  display: table;
}

content 属性允许在文档被浏览器解析时,动态生成内容元素

上例即: 在.clearfix元素的前后各插入一段空的内容元素,并且将其盒子类型模式设置为'table',借助于表格布局的特性(详见参考),相当于进行了清除浮动

参考 ​