HTML5系列代码:使用伪元素选择符

  • :first-letter 伪元素向文本的第一个字母添加特殊样式。
  • 这个伪元素用于指定一个元素第一个字母的样式。所有前导标点符号应当与第一个字母一同应用该样式。某些语言有一些要处理为单个字符的字母组合,如果是这样,用户代理可能会把首字母同时应用到这个字母组合。
  • 在 CSS2.1 之前,:first-letter 只能与块级元素关联。CSS2.1
    扩大了这个范围,可以与任何元素关联。可以应用到首字母的属性是有限的。
  • 注释:下列属性应用于 :first-letter 伪元素:
    font 属性
    color 属性
    background 属性
    margin 属性
    padding 属性
    border 属性
    text-decoration
    vertical-align (仅当 ‘float’ 为 ‘none’ 时)
    text-transform
    line-height
    float
    clear
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>添加content内容</title>
<style type="text/css">
/* 突出第一个字 */
p:first-letter {
	font-size:24px;
	font-weight:bold;
}
/* 链接前加图片 */
a[href$=doc]::before {
 content:url(images/doc.png);
}
a[href$=pdf]::before {
 content:url(images/pdf.png);
}
</style>
</head>
<body>
<p>以下是参考资料:<br>
  <a href="images/test.doc">参考资料1</a><br>
  <a href="images/test.pdf">参考资料2</a> </p>
</body>
</html>

你可能感兴趣的:(HTML5)