css伪元素:first-letter

视频地址：点此查看

今天我们来介绍一个css的伪元素**:first-letter，**他可以让我们获取一段文字的首字，可以单独为这个首字设置样式。

我们先来看这段代码

p{
  border: 1px solid #000;
  padding: 10px;
  width: 250px;
}

<p>到南京时，有朋友约去游逛，勾留7了一日；第二日上午便须渡江到浦口，
下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房8陪我同去。
他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖9；颇踌躇10了一会。
其实我那年已二十岁，北京已来往过两三次，是没有什么要紧的了。
他踌躇了一会，终于决定还是自己送我去。我再三劝他不必去；
他只说：“不要紧，他们去不好！”</p>

很简单，这是一段p标签包裹的文本，p标签的宽度为250像素，有一个1像素的边框，10像素的内边距，效果是这样子的

我们可以使用这个属性让首字下沉，并加上特殊的样式，看下面这段代码

p::first-letter{
  font-size: 40px;
  color: #f00;
}

效果是这样子的

如果我们还想让其他文字漂浮上去，可以使用浮动来解决

float:left