html伪类选择器的用法,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样式

p:first-letter

{

font-size:200%;

color:#8A2BE2;

}

Welcome to My Homepage

My name is Donald.

I live in Duckburg.

My best friend is Mickey.

再看一个实例：

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

::first-letter {

background-color: grey;

color: white;

border: thin black solid;

padding: 4px;

}

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.

I like CSS.

效果如下所示：