將第一個字母應用於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

回答

相關問題