css :first-letter伪类选择器使用实例及分析

css :first-letter介绍

css :first-letter选择器选取指定元素文本内容的第一个字母，即用于设置第一个字母的css样式。

语法：

:first-letter { 
   style properties 
}

如：

h1:first-letter  {font-size: 166%;}/*用于设置h1标签里面文字的第一个字母样式*/
p:first-letter {text-decoration:  underline;}/*用于设置p标签里面文字的第一个字母样式*/

注意：:first-letter仅作用于块元素。内联元素要使用该伪对象，必须先设定元素的height或width属性，或者设定position属性为absolute，或者设定display属性为block。

css :first-letter实例

设置每个段落元素的第一个字母css样式

<!DOCTYPE html>
<html>
<head>
<style>
p:first-letter
{
font-size:200%;
color:#8A2BE2;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
<p>My best friend is Mickey.</p>

</body>
</html>

在线运行

再看一个实例：

The following code uses the ::first-letter Pseudo-Element Selector.

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
::first-letter {
  background-color: grey;
  color: white;
  border: thin black solid;
  padding: 4px;
}
</style>
</head>
<body>
  <p>This is a test. This is a test. This is a test. This is a test.
  This is a test. This is a test. This is a test. This is a test. This is a test.
  This is a test. </p>

  <p>
    I like <span lang="en-uk" class="class2">CSS</span>.
  </p>
</body>
</html>

效果如下所示：

css :first-letter伪类选择器使用实例及分析