css如何設定字串中第一個字元的樣式

螞蟻小編發表於2017-04-16
CSS字串字元

本章節介紹一下如何使用css設定字串中第一個字元的樣式。

以前我們實現此效果的方式，可能會在第一個字元上巢狀上一個span標籤。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
span{
  color:red;
}
</style>
</head>
<body>
<div><span>螞</span>蟻部落的url地址是softwhy.com</div>
</body>
</html>

上面的程式碼實現了我們的要求，但是略顯繁瑣，下面介紹一下如何用偽物件選擇器實現此功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div::first-letter{
  color:red;
}
</style>
</head>
<body>
<div>螞蟻部落的url地址是softwhy.com</div>
</body>
</html>

上面的程式碼同樣實現了我們的要求，更多內容可以參閱CSS E:first-letter/E::first-letter一章節。

相關文章