CSS 中的 ::first-letter 伪元素

cssweb developmentfront end technology更新于 2025/1/19 1:48:17

此 CSS 伪元素选取元素内容的首字母。但是，如果元素是行内元素，则此方法无效。

示例

我们来看一个 CSS ::first-letter 伪元素的示例 −

<!DOCTYPE html>
<html>
<head>
<style>
div{
   background-color: #32485d;
   border: 5px solid black;
   color: #959799;
}
p::first-letter {
   font-size: 1.5em;
   color: #f9f9f9;
   padding: 2px;
}
</style>
</head>
<body>
<div>
<h2>Eclipse IDE</h2>
<p>"Eclipse is an integrated development environment (IDE) for Java and other programming languages 
like C, C++, PHP, and Ruby etc. Development environment provided by Eclipse includes the Eclipse Java 
development tools (JDT) for Java, Eclipse CDT for C/C++, and Eclipse PDT for PHP, among others."</p>
</div>
</body>
</html>

输出

这将产生以下输出 −

示例

让我们看另一个 CSS ::first-letter 伪元素的例子 −

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
   font-size: 1.5em;
   background-color: black;
   color: #dc3545;
   padding: 2px;
}
</style>
</head>
<body>
<div>
<h2>Machine Learning Tutorials</h2>
<p>TensorFlow</p><p>Machine Learning with Python</p><p>Time Series</p><p>PyTorch</p>
</div>
</body>
</html>