html伪类选择器的用法,css:firstletter伪类选择器使用实例及分析

css :first-letter介绍

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

语法&＃xff1a;

:first-letter {

style properties

}

如&＃xff1a;

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

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

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

css :first-letter实例

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

p:first-letter

{

font-size:200%;

color:#8A2BE2;

}

My name is Donald.

I live in Duckburg.

My best friend is Mickey.

再看一个实例&＃xff1a;

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.

效果如下所示&＃xff1a;