Question

我的页面中有很多段落

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

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

Answer 1

你在这里

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

Answer 2

你可以尝试

<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

Answer 3

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

注意：::first-letter可以使用以下属性：

字体属性颜色属性背景属性保证金属性填充属性边境物业文字修饰 vertical-align（仅当float为'none'时）文本转换行高浮动明确

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

检查w3school以获取更多信息和在线测试。

Answer 4

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

仅使用CSS为段落中的第一个字母应用样式

4 个答案: