&nbs p;
一、了解::first- let ter伪元素到底什么 意思
很多年前，Ch rom e浏览器还没出身，IE9还未出现的时候， First -letter 那时候还叫做伪 类选择器 ，写法是一个冒号，如斯 :first-letter ，那时候的语义要更直白一些，选择第一个字符，然后设置一些样式。后来， 伪类 和伪元素被划分地更加 明确 和规范了， : :after , :: before , ::backdrop , ::first-letter , ::first-line , ::selection （ 文章 参见这里）是伪元素， :active , :focus , :checked 等等 被称为伪类。导致 ::first-letter 的语义发生了一些变化—— 首字符作为元素的假想子元素 。
注意这里的一些措辞，“假想的”对应“伪”，以及出现的“子元素”这个名词，这些在理解 first-letter 一些样式表现的时候非常 重要 。
二、::first-letter伪元素 生效 的前提
要想 ::first-letter(:first-letter) 伪元素生效，是需要一定的条件的，而且条件乍一看还挺苛刻。
1. 首先 ，元素的 dis play 计算值必须是 block , inline-block , table-cell , list -i tem 或者 table-caption ，其他所有 display 计算值都没有用，包括 display:table 以及 display: flex 等。
眼见为实，您可以狠狠地点击这里：display属性值与::first-letter生效关系demo
例如，我们选择 display:flex ，结果，首字母是黑色而不是 红色 ，说明 display:flex 元素不支持 ::first-letter 伪元素。
2. 然后 ，不是所有的字符都能单独作为 ::first-letter 伪元素存在的，什么意思呢，我们看个 简单 的例子，如下 CSS 和 HTML 代码：
p:first-letter { color: # cd0000; }
<p>？？？？？？？</p>
按照我们的认知，是不是 应该 第一个问号应该是红色的，实际上，抱歉，全部都是默认黑色，下面这一行就是实时显示的效果：
.ask-letter{background:#f0f3f9;padding:5px;}.ask-letter:first-letter { color: #cd0000; }？？？？？？？
为什么呢？
这是因为常见的 标点符号 ，各类括号和引号在 ::first-letter 伪元素眼中全部都是“辅助类”字符，有点 京东 买东西送的赠品的感觉，但是赠品本身却不能购买，这里的问号（？）就属于赠品。有些不理解，我们看了例子就 知道 了，假如我们在上面HT ML 一堆问号后面写上一些内容字符，比方说中文“辅助”二字，结果效果是下面这样：
？？？？？？？辅助
“？？？？？？？辅”全部都红色了，小样还挺有个性的，要么不红，要红就红一大波。 原因 是，“辅助”二字才是 ::first-letter 伪元素真正要 收入 囊中作为“伪元素”的字符，但是现在前面出现了一堆不感冒的问号（？），怎么办呢？那就当做是赠品一并收了，于是，一大波字符全都红色了。如果全是问号（？），由于没有主商品，自然也就无法获得赠品，所以 ::first-letter 没有选择任何字符，问号全部都是黑色。
下面有小伙伴可能会疑问，拿到底 哪些 字符属于“赠品”，哪些属于“商品”呢，我特意整了个demo，您可以狠狠地点击这里：CSS ::first-letter与特殊字符关系测试demo
下图为demo截图：
总结下来就是，“赠品字符”包括： · @ # % & am p; * ( ) （ ） [ ] 【 】 { } : ： " “ ” ; ； ' ‘ ’ 》 《 , ， . 。 ？ ? ! ！ … * 、 / / 。
正常 直接可以作为伪元素的字符就是数字，英文字母，中文以及 $ 以及一些 运算 符以及非常容易 忽视 的 空格 等。这里空格有必要再 加粗 强调下，很容易忽视的一个字符。
//zxx: 需要注意的是IE7浏览器下“赠品字符”要少很多很多，IE8+浏览器 开始 大 统一
3. 最后 ，字符前面不能有图片或者 inline -t able 之类的元素存在，例如，下面的HTML和CSS：
p:first-letter { color: #cd0000; }
<p><i style="display:inline-block"></i>红色</p>
结果：
红色
就因为多了一个 display 值是 inline-block 尺寸 为 0 的 <i> 元素，导致 ::first-letter 伪元素直接酱油了。
有人可能会疑问，要是是 ::before 伪元素生成的呢？
一般来讲， ::before 伪元素和普通元素之间没有多少瓜葛，例如， :first-child , :empty 之类的选择器都不受影响，具体可参见我之前研究的文章“CSS之before, after伪元素特性表现两则”。但是，由于 ::first-letter 他也是伪元素，所谓鱼配鱼虾配虾，乌龟配王八，由于大家都是伪元素，总会有些不可磨灭的基情。
用专业 术 语概括就是： ::before 伪元素也参与 ::first-letter 伪元素。
例如，如下CSS和HTML：
p:before { content: '新闻：'; } p:first-letter { color: #cd0000; }
<p>锤子 科技 10月18日2016上海 新品 发布会</p>
结果如下截图所示：
如若不信，可点这里：::before伪元素与被::first-letter伪元素获取demo
包括IE8在在内的浏览器都是这样的表现。
三、::first-letter伪元素可以生效的 CSS属性
如果字符被选作了 ::first-letter 伪元素，并不是像 ::before 伪元素那样，几乎所有CSS都有效，仅仅是一部分，如下：
所有字体相关属性： font , font -s tyle , font- VAR iant , font-weight , font-size , line-h ei ght 以及 font-f ami ly . 所有背景相关属性： background-color , background-image , background-pos IT ion , background-re PE at , background-size , 以及 background-attachment . 所有 m arg in 相关属性： mar gin , margin-top , margin-right , margin-bottom , margin-left . 所有 padding 相关属性： padding , padding-top , padding-right , padding-bottom , padding-left . 所有border相关属性：缩写的 border , border-style , border-color , border-width 及普通书写的属性。 color 属性。 text-decoration , text-transform , letter-spacing , word-spacing (合适情境下), line-height , float , vert ical -align （只有当 float 为 none 的时候）这些CSS属性们.所以大家如果妄图使用 visibility:hidden 或者 display:none 隐藏 ::first-letter 伪元素，那还是省省吧。
四、::first-letter伪元素一些有意思的特点
1. 支持部分display属性值标签嵌套
::first-letter 伪元素获取可以跨标签，也就是不仅能选择匿名内联 盒子 ，还能透过层层标签进行选择，但是，也是有一些限制，并不是所有标签嵌套都是有用的。
display 值如果是 inline , block , table , table-row , table-caption , table-cell , list-item 都是可以的；但是不能是 inline-block , inline-table ，会直接无效；而 display:flex 则 改变 了规则，直接选择了下一行的字符内容。
语言苍白，眼见了然，您可以狠狠地点击这里：CSS ::first-letter与各种类型标签嵌套demo
我们还是以 display:flex 做效果示意，如下CSS和HTML：
p:first-letter { color: #cd0000; } p > span { display: flex; }
<p><span>第一个</span>字符看看会不会变红？</p>
结果：
并且，这种嵌套关系支持多层嵌套，就是，连续套个4~5层 inline 水平的标签，和没有任何标签嵌套效果是一样的。
2. 颜色等权重 永远 最高
这是是小伙伴非常容易犯的一个错误，也是CSS世界10大不理解问题之一，例如下面这个问题，是某同行邮件问我的，我简单编辑了下：
p:first-letter { color: red ; } p > span { color: blue!important; }
<p><span>第一个</span>字符看看会不会变红？</p>
请问“第”这个字符的颜色 是什么 ？
基本上，超过95%的前端小伙伴会认为是 blue ，因为大家都是从CSS选择器权重的角度去考虑的，本身是没问题，但是却忽略了很重要的一个点， ::first-letter 伪元素其实是作为子元素存在的，或者说应当看出是子元素，于是，就很好理解了，对于类似 color 这样的继承属性，子元素的CSS设置一定比父元素的级别要高，哪怕父级使用了重量级的 !important ，因为子元素会先继承，然后再应用自身设置，所以，上面CSS和HTML的最终结果是，第一个字符“第”字的颜色是 red 红色！
这就是 ::first-letter 伪元素的另外一个重要特性，颜色等权重永远最高。
关于此颜色案例，如果 觉得 怀疑，可以亲眼见证下，您可以狠狠地点击这里：::first-letter伪元素颜色权重永远最高demo
结果如下截图：
五、::first-letter一些实际应用举例
数年前曾介绍过 first-letter 一个兼容IE6,IE7可以让 inline-block 元素隐藏 文字的方法，名叫“letter-spacing+first-letter实现按钮文字隐藏”。
这里再展示一个实际应用，是水哥之前跟我提及的。就是 电商 产品经常会有价格，价格前面一般都是有个羊角符号 ¥ ，表示价钱。往往这个羊角符号字体会比较特殊， 字号 也比 较大 ，同时和文字的数值有几像素的 距离 。要实现这里的效果，我们通常的做法是在羊角符号 ¥ 外面包个 span 标签，命名个类名，然后通过CSS控制，实际上，有更简单巧妙的方法，就是使用本文介绍的 ::first-letter 伪元素。
如下CSS示意代码：
. PR ice:first-letter { margin-right: 5px; font- Size: xx-large; vertical-align: -2px; } 于是，我们的HTML就可以很简洁：
<p>¥399</p>
羊角符号 ¥ 并不是“赠品”字符，因此，这里可行。
您可以狠狠地点击这里：CSS ::first-letter巧妙控制羊角符号demo
结果截图如下：
六、关于::first-letter的结束语
首先， ::first-letter 本身兼容性非常好，如果是PC项目，需要兼顾IE8浏览器的，使用单冒号写法 :first-letter ，包括IE6在内的浏览器都支持；如果是内部项目或者移动端项目，建议使用双冒号 ::first-letter ，大可放心使用。
实际上，细细体味，会发现，虽然 ::first-letter 兼容性很好，浏览器很早就支持，但是我们实际项目用得并不多，那是因为，我们可以通过嵌套 span 标签的方式，实现更为广泛更灵活的样式控制。
但是，实际开发场景千千万，总会遇到HTML结构不能改动，或者改动 成本 很高的的情况。所谓“HTML结构不能改动”比方说用户通过富文本编辑器生成的内容，动态内容不受控制；“改动成本很高”一些按钮或者基础的UI组件已经遍布在项目的各个角落，此时，再想给所有的标签重新嵌套结构，成本就很高了。类似这样的情况， ::first-letter / ::first-line 等就非常有用，而且多 半 扮演英雄或者救星的角色。
因此，虽然 ::first-letter 用得少，但并不表示没有用，想法，特殊场景可以力挽狂澜。大家只需扎实基础，等遇到类似需求时候，自然会散发出大神光芒，各种奇巧妙招手到擒来。
好，就说这么多，9月最后1天赶出的文章，祝大家国庆节快乐！
行文匆忙，出错在所难免，欢迎指正，也欢迎各种形式的技术交流。
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-深入CSS ::first-letter伪元素及其实例等 全部内容，希望文章能够帮你解决 html5教程-深入CSS ::first-letter伪元素及其实例等 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-深入CSS ::first-letter伪元素及其实例等的详细内容...