::第一个字母

这个::第一个字母 CSS公司 假元素将样式应用于块状集装箱,但仅当前面没有其他内容(例如图像或内联表)时。

试试看

元素的第一个字母并不总是微不足道的:

  • 第一个字母之前或之后的标点包含在匹配中。标点包括在打开(P),关闭(Pe),初始报价(Pi),最终报价(Pf),和其他标点符号(Po)类。
  • 有些语言的双连字符总是大写在一起,比如IJ公司用荷兰语。在这些情况下,有向图的两个字母都应与::第一个字母伪元素。
  • 以下各项的组合::之前伪元素和内容属性可以在元素的开头插入一些文本。在这种情况下,::第一个字母将匹配此生成内容的第一个字母。

注:CSS推出了::第一个字母符号(用两个冒号)来区分伪类伪元素。为了向后兼容,浏览器也接受:第一个字母,之前介绍。

浏览器支持有向图,如IJ公司荷兰语是穷人。检查下面的兼容性表以查看支持的当前状态。

允许的特性

语法

css格式
::第一个字母 {
  /* ... */
}

示例

简单吊帽

在这个示例中,我们将使用::第一个字母伪元素以在段落的第一个字母上创建简单的首字母下沉效果<h2>

HTML格式

html格式
<氢气>我的标题</氢气>
<第页>Lorem ipsum dolor sit amet,consetetur sadipscing精英,sed diam nonumy埃莫德临时邀请ut labour et dolore magna aliquyam erat,sed diam性感。在vero eos et accumam et justo duo dolores et ea rebum。Stet clita公司kasd gubergren,no sea takimata sanctus est。</第页>
<第页>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse调戏康塞奎特。</第页>

CSS公司

css格式
第页 {
  宽度以下为:500像素;
  线路高度以下为:1.5;
}

h2+p::第一个字母 {
  颜色以下为:白色;
  背景色以下为:黑色;
  边界半径以下为:2像素;
  盒子阴影以下为:3px 3px 0红色;
  字体大小以下为:250%;
  衬垫以下为:6像素3像素;
  保证金权利以下为:6像素;
  浮动以下为:左边;
}

结果

对特殊标点符号和非拉丁字符的影响

此示例说明了::第一个字母特殊标点符号和非拉丁字符。

HTML格式

html格式
<第页>在弗鲁普塔特(vulputate velit esse molestie)的亨德雷特(Henderrit),杜伊斯(Duis autem vel eum)虹膜悲伤康塞奎特。</第页>
<第页>-特殊标点符号的开头。</第页>
<第页>_特殊标点符号的开头。</第页>
<第页>“特殊标点符号的开头。</第页>
<第页>“特殊标点符号的开头。</第页>
<第页>*特殊标点符号的开头。</第页>
<第页>#特殊标点符号的开头。</第页>
<第页>特殊的汉字标点符号开头。</第页>
<第页>特殊的汉字标点符号开头。</第页>
<第页>"特殊的汉字标点符号开头。</第页>

CSS公司

css格式
p: :第一个字母 {
  颜色以下为:红色;
  字体大小以下为:150%;
}

结果

在SVG文本元素中设置第一个字母的样式

在这个示例中,我们使用::第一个字母为SVG的第一个字母设置样式的pseudo元素<文本>元素。

注:在编写此功能时有限的支持

HTML格式

html格式
<高级副总裁 视图框="0 0 300 40">
  <文本 ="30">中的第一个字母&它;文本&gt;SVG公司</文本>
</高级副总裁>

CSS公司

css格式
文本 {
  前家族以下为:无衬线;
}

text::第一个字母 {
  前家族以下为:衬线;
  字体大小以下为:2雷姆;
  字体加粗以下为:600;
  填满以下为:番茄;
  (打、击等的)一下以下为:靛蓝;
}

结果

规格

规范
CSS伪元素模块4级
#第一个字母-假

浏览器兼容性

BCD表仅在浏览器中加载

另请参见