I have a p tag that has few lines in there , but each line of text is suppose to be a different font size. I added span to be able to access with css and fix that but I have not be able too
<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%</span>
<span>off a tour of the</span>
<span>historic</span>
<span>gerhard</span>
<span>monastery</span>
</p>
I gave each span a class...to access with css but didn't make a difference.
css
.img-special .special-text .special-size24 { font-size: 24px; }
2 个答案:
答案 0 :(得分：3)
Use nth child
#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;
}
Fiddle
答案 1 :(得分：1)
Giving class names to the span tags worked for me:
#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%</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>