啦啦啦

Alfalfa  you name ? 



家中独我一人矣。
CSS :first-letter 选择器 a 标签时不生效如何处理?

根据手册上定义和用法,:first-letter 选择器用于选取指定选择器的首字母。

案例



我们可以看到改变了首字母的样式。

我们写下如下代码

<style>
a:first-letter{
color: #63c24b;
}
</style>
<a href="">Welcome to My Homepage</a>

效果如下


为什么首字母没有改变呢?Why?


解决办法

1.为a 增加浮动

<style>
a{
float: left;
}
a:first-letter{
color: #63c24b;
}
</style>

2.将行内元素变成块级元素

<style>
a{
display: block;
}
a:first-letter{
color: #63c24b;
}
</style>


同理其他元素也会存在这样的问题,例如 span,i,em 等等,同时还需注意以下属性可与 :first-letter 使用


1.字体属性
2.颜色属性
3.背景属性
4.外边距属性
5.内边距属性
6.边框属性
7.text-decoration
8.vertical-align(只有在 float 为 'none' 时)
9.text-transform
10.line-height
11.float
12.clear


参考资料

[w3school]CSS :first-letter 伪元素



你可能还会对下面的内容感兴趣:

Music List
0:00
Artist
MUsic Title