#书摘 #css #前端
《CSS 世界》了解 :first-letter 伪元素
很多年前，Chrome浏览器和IE9浏览器还未出现，那时候first-letter叫伪类选择器，写法是前面加一个冒号，如:first-letter。那时候的语义要更直白一些，选择第一个字符，然后设置一些样式。后来，伪类和伪元素被划分得更加明确和规范了，::after、::before、 ::backdrop、::first-letter、::first-line、::selection等是伪元素，:active、 :focus、:checked等被称为伪类，这就导致::first-letter的语义发生了一些变化—首字符作为元素的假想子元素。
1．::first-letter 伪元素生效的前提 要想让::first-letter(:first-letter)伪元素生效，是需要满足一定条件的，而且条件乍一看还挺苛刻。首先，元素的display计算值必须是 block、inline-block、list-item、table- cell 或者 table-caption，其他所有 display 计算值都没有用，包括 display:table和display:flex等。 此外，不是所有的字符都能单独作为::first-letter 伪元素存在的，常见的标点符号、各类括号和引号在::first-letter 伪元素眼中全部都是“辅助类”字符，不算。字符前面不能有图片或者 inline-block/inline-table 之类的元素存在。
2．::first-letter伪元素可以生效的CSS属性 如果字符被选作了::first-letter 伪元素，并不是像::before 伪元素那样，几乎所有CSS都有效，只是一部分有效。因此，如果妄图使用 visibility:hidden 或者 display:none 隐藏::first- letter伪元素，还是省省吧（如p3）
《CSS 世界》了解 :first-letter 伪元素
很多年前，Chrome浏览器和IE9浏览器还未出现，那时候first-letter叫伪类选择器，写法是前面加一个冒号，如:first-letter。那时候的语义要更直白一些，选择第一个字符，然后设置一些样式。后来，伪类和伪元素被划分得更加明确和规范了，::after、::before、 ::backdrop、::first-letter、::first-line、::selection等是伪元素，:active、 :focus、:checked等被称为伪类，这就导致::first-letter的语义发生了一些变化—首字符作为元素的假想子元素。
1．::first-letter 伪元素生效的前提 要想让::first-letter(:first-letter)伪元素生效，是需要满足一定条件的，而且条件乍一看还挺苛刻。首先，元素的display计算值必须是 block、inline-block、list-item、table- cell 或者 table-caption，其他所有 display 计算值都没有用，包括 display:table和display:flex等。 此外，不是所有的字符都能单独作为::first-letter 伪元素存在的，常见的标点符号、各类括号和引号在::first-letter 伪元素眼中全部都是“辅助类”字符，不算。字符前面不能有图片或者 inline-block/inline-table 之类的元素存在。
2．::first-letter伪元素可以生效的CSS属性 如果字符被选作了::first-letter 伪元素，并不是像::before 伪元素那样，几乎所有CSS都有效，只是一部分有效。因此，如果妄图使用 visibility:hidden 或者 display:none 隐藏::first- letter伪元素，还是省省吧（如p3）
