如何在其中设置跨度的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>