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

时间:2016-08-05
:first-letter顾名思义就是第一个字母,css :first-letter选择器用于匹配指定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仅作用于块元素。内联元素要使用该伪对象,必须先设定元素的heightwidth属性,或者设定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伪类选择器使用实例及分析

上一页 下一页

原文地址:http://www.manongjc.com/article/1312.html