将第一个字母应用于CSS

我正在写一个HTML代码，其中第一个字母必须是大的，并且应该是2行。以下是我的代码。将第一个字母应用于CSS

HTML

<div class="section-sect1"> 
    <a name="CH_00001-SEC-1"></a> 
    <div class="section-title"> 
    <span class="section-num"></span> Title</div> 
    <div class="para">Text1 
    </div> 
    <div class="para">Text2 
    </div> 
</div>

CSS

.section-sect1 .para:first-of-type:first-letter { 
border: 1px solid; 
font-weight: bold; 
color: red; 
}

这里是相同的小提琴链接。 https://jsfiddle.net/8b5z8gb4/

请让我知道我该怎么做到这一点。

来源

2016-08-01 user3872094

.para：第一个字母：第一个字母代替这个使用这个.para：第一个字母只适用于第一个字母的css –

，如果你想只选择第一.para使用这种

.section-sect1 .section-title + .para:first-letter { 
 
border: 1px solid; 
 
font-weight: bold; 
 
color: red; 
 
}

<div class="section-sect1"> 
 
    <a name="CH_00001-SEC-1"></a> 
 
    <div class="section-title"> 
 
    <span class="section-num"></span> Title 
 
    </div> 
 
    <div class="para">Text1 
 
    </div> 
 
    <div class="para">Text2 
 
    </div> 
 
</div>

的第一个字母

因为.para div不是容器内唯一的孩子，你不能使用:first-child或类似的东西。所以你需要使用像+这样的兄弟选择器，它在.section-title之后选择第一个.para

来源

2016-08-01 08:58:12

您可以通过使用下面的代码来实现此目的。

.para::first-letter{ 
    font-size: 20px; 
}

随着使用::first-letter可以能够检测到第一个字母para类，现在你可以样式的第一个字母。

来源

2016-08-01 08:54:45

使用:first-letter而不是:first-of-type:first-letter

检查fiddle我已经更新

来源

2016-08-01 08:54:48

你的代码看起来很酷并且没有太多关注。只需从您的CSS中删除:first-of-type即可完成！

来源

2016-08-01 09:06:25

您可以添加第一个字母类风格

这样的：

.firstcharacter { float: left; color: #903; font-size: 50px; line-height: 20px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

<div class="section-sect1"> 
 
    <a name="CH_00001-SEC-1"></a> 
 
    <div class="section-title"> 
 
    <span class="section-num"></span> <span class='firstcharacter'>T</span>itle</div> 
 
    <div class="para">Text1 
 
    </div> 
 
    <div class="para">Text2 
 
    </div> 
 
</div>

，或者您桅杆标签p添加测试

这样的：

.string p:first-child:first-letter { float: left; color: #903; font-size: 50px; line-height: 20px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia;} 
 
.string p {margin-bottom: 0px;}

<div class="section-sect1"> 
 
    <a name="CH_00001-SEC-1"></a> 
 
    <div class="section-title"> 
 
    <span class="section-num"></span> <span class='string'><p>Title</p></span></div> 
 
    <div class="para">Text1 
 
    </div> 
 
    <div class="para">Text2 
 
    </div> 
 
</div>

来源

2016-08-01 09:30:29

您可以将第一个字母在一个单独的标签，然后风格标签显得与众不同：

<span style="font-weight: bold">F</span><p>irst paragraph</p>

闻听此事：

˚F IRST款

来源

2016-08-01 11:37:15 StellarDoor5319

将第一个字母应用于CSS

回答

相关问题