有没有一种方法可以使CSS标签中的第一个字符变为大写。
这是我的HTML:
<a class="m_title" href="">gorr</a>
<a class="m_title" href="">trro</a>
<a class="m_title" href="">krro</a>
<a class="m_title" href="">yrro</a>
<a class="m_title" href="">gwwr</a>
有没有一种方法可以使CSS标签中的第一个字符变为大写。
这是我的HTML:
<a class="m_title" href="">gorr</a>
<a class="m_title" href="">trro</a>
<a class="m_title" href="">krro</a>
<a class="m_title" href="">yrro</a>
<a class="m_title" href="">gwwr</a>
我建议使用
#selector {
text-transform: capitalize;
}
要么
#selector::first-letter {
text-transform: uppercase;
}
顺便说一句,检查此w3schools链接:http : //www.w3schools.com/cssref/pr_text_text-transform.asp
请注意,::first-letter
选择器不适用于嵌入式元素,因此必须为block
或inline-block
,如下所示:
.m_title {display:inline-block}
.m_title:first-letter {text-transform: uppercase}
首先使其小写:
.m_title {text-transform: lowercase}
然后将其首字母大写:
.m_title:first-letter {text-transform: uppercase}
一句话,“文本转换:大写”有效;但是您想要多个单词,此解决方案是完美的。
有一个属性:
a.m_title {
text-transform: capitalize;
}
如果您的链接可以包含多个单词,并且您只希望第一个单词的第一个字母为大写字母,请改用:first-letter
其他转换(尽管这并不重要)。注意,为了使:first-letter
工作的a
元件需要是块容器(其可以是display: block
,display: inline-block
或任何各种一个或多个属性的其他组合的):
a.m_title {
display: block;
}
a.m_title:first-letter {
text-transform: uppercase;
}
我建议您在CSS中使用以下代码:
确保将其放在班级中。