Home > Web Front-end > HTML Tutorial > css如何设置字符串中第一个字符的样式_html/css_WEB-ITnose

css如何设置字符串中第一个字符的样式_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:27:00
Original
1798 people have browsed it

css如何设置字符串中第一个字符的样式:
本章节介绍一下如何使用css设置字符串中第一个字符的样式。
以前我们实现此效果的方式,可能会在第一个字符上嵌套上一个span标签。
代码实例如下:

<!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>
Copy after login

上面的代码实现了我们的要求,但是略显繁琐,下面介绍一下如何用伪对象选择器实现此功能。
代码实例如下:

<!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>
Copy after login

上面的代码同样实现了我们的要求,更多内容可以参阅CSS的伪对象选择符E:first-letter/E::first-letter一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=18254

更多内容可以参阅:http://www.softwhy.com/divcss/

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template