如何在其中設置跨度的ap標簽樣式

Question

我有一個ap標簽，里面有幾行，但是每行文本應該是不同的字體大小。 我添加了跨度以能夠使用CSS進行訪問並修復該問題，但我也無法

   <p id="special-text">
                    <span class="special-size24">reserve your </span>
                    <span class="special-size24"> suite now</span>
                    <span class="speciallinetwo"> and get</span>
                    <span> 20&#37;</span>
                    <span>off a tour of the</span>
                    <span>historic</span>
                    <span>gerhard</span>
                    <span>monastery</span>
</p>

我給每個范圍一個類...以使用CSS進行訪問，但沒有任何區別。

的CSS

.img-special .special-text .special-size24 { font-size: 24px; }

Answer 1

使用第n個孩子

#special-text span:nth-child(1){
    color: red; 
} 
#special-text span:nth-child(2){
    color: green; 
} 
#special-text span:nth-child(3){
    color: blue; 
} 
#special-text span:nth-child(4){
    color: yellow; 
} 

小提琴

Answer 2

將類名稱賦予span標簽對我有用：

 #special-text{} #special-text .specialline1{font-size:12px;} #special-text .specialline2{font-size:16px;} #special-text .specialline3{font-size:20px;} #special-text .specialline4{font-size:24px;} #special-text .specialline5{font-size:28px;} #special-text .specialline6{font-size:32px;} #special-text .specialline7{font-size:36px;} 

 <p id="special-text"> <span class="specialline1">reserve your <br> suite now</span> <span class="specialline2"> and get</span> <span class="specialline3"> 20&#37;</span> <span class="specialline4">off a tour of the</span> <span class="specialline5">historic</span> <span class="specialline6">gerhard</span> <span class="specialline7">monastery</span> </p>