应用样式的第一个字母段只使用CSS

我有很多段落我的页面应用样式的第一个字母段只使用CSS

<div> 
<p>Sample Text</p> 
<p>Abc</p> 
<p>Third Sample</p> 
</div>

在每个段落的第一个字母应该大写和字体大小是通过CSS增加。所有段落内容都是动态加载的。请建议我如何解决这个问题，而不使用javascript/jQuery。

来源

2014-07-10 Satz

'P ::第一个字母{...}'？ – Vucko

@Vucko也建议，看看这个[小提琴]（http://jsfiddle.net/nicolaeolariu/tL89V/3/）。 –

给你

p::first-letter 
{ 
text-transform: uppercase; 
font-size: 25px; /* Change this to your choice */ 
}

来源

2014-07-10 07:26:42

的::first-letter选择用于将样式添加到指定选择的第一个字母。

注：

字体属性颜色属性背景属性边距属性 padding属性边框属性文字修饰垂直对齐（仅在浮动：以下属性可以与::first-letter使用是'无'） text-transform line-height float clear

注意：::first-letter选择器只能与块级元素一起使用。

查询w3school了解更多信息和在线测试。

来源

2014-07-10 07:29:53 bumbumpaw

请参阅http://stackoverflow.com/help/referencing以获取有关引用其他来源的帮助。 – BoltClock

div >p::first-letter{ 
    color:red; 
    font-size:20pt; 
}

来源

2014-07-10 07:31:37 Kisspa

你可以尝试

<div id="mydiv"> 
    <p>sample Text</p> 
    <p>abc</p> 
    <p>third Sample</p> 
    <p>i think it is working</p> 
    <p>isn't it ?</p> 

</div>

和CSS

#mydiv p::first-letter { 
    color: red; 
    font-size: 24px; 
    font-family:arial unicode ms; 
    text-transform: uppercase; 
} 
#mydiv p { 
    color:green; 
    font-size:16px; 
    font-family:arial unicode ms; 
}

JSFIDDLE

来源

2014-07-10 08:03:38

应用样式的第一个字母段只使用CSS

回答

相关问题