如何通过css快速实现文字首字母放大或大写效果

在网页中，经常可以见到内容的首字母/字进行放大或同时大写效果，对内容进行强化，如下图：

我们可以通过CSS 中选择确定的 first-of-type 元素。同时使用 ::first-letter 伪类去实现首字母大写的效果。通过配合其他css属性，进行差异化显示。

这个类可以让我们更自由的添加样式。所以，你可以调整大写字母的样式以符合你的站点设计风格。

这里我们是应用追格官网首页，做的效果，大家可以结合自己网站风格进行优化

参考可访问追格官网：www.zhuige.com

.zhuige-trade-info div {
	font-size: 14px;
	font-weight: 200;
	color: #777777;
	line-height: 30px;
}
 /* 以上为原始代码，下面这部分是首字母放大 */
.zhuige-trade-info div:first-of-type::first-letter {
    color: #6633aa;
    float:  left;
    font-size: 4rem;
    line-height: 4vw;
    font-weight: 600;
    padding-right: 8px;
}