2012-10-21 160 views
20

我試圖根據它們所在的div但未成功更改H2字體和H2鏈接字體的顏色和大小。我究竟做錯了什麼?更改DIV中的字體顏色(CSS)

<style> 
h2 { 
color:fff; 
font-size: 20px; 
} 
social.h2 { 
color:pink; 
font-size: 14px; 
} 
social.h2.h2color { 
color:purple; 
font-size: 10px; 
} 
tv.h2 { 
color:green; 
font-size: 14px; 
} 
tv.h2.h2color { 
color:orange; 
font-size: 10px; 
} 
</style> 

<h2>List of Companies </h2> 
<div class="social"> 

<h2>  <A href="http://www.facebook.com">Facebook  </a> 
<span class="h2color">Found in 2004  </span>  </h2> 
blah blah blah 

<h2>  <A href="http://www.twitter.com">Twitter  </a> 
<span class="h2color">Found in 2007  </span>  </h2> 
blah blah blah 

</div> 


<div class="tv"> 

<h2>  <A href="http://www.fox.com">Fox  </a> 
<span class="h2color">Found in 2004  </span>  </h2> 
blah blah blah 

<h2>  <A href="http://www.nbc.com">NBC  </a> 
<span class="h2color">Found in 2007  </span>  </h2> 
blah blah blah 
</div> 

我想使它看起來像這樣:

enter image description here

回答

18

你的第一個CSS selector- social.h2 -is尋找的 「H2」 的 「社交」 元素,類,如:

<social class="h2"> 

級別選擇器進行點(.)。此外,請使用空格()指示一個元素位於另一個元素的內部。爲了找到<h2>後裔在social類的元素,你可以試試:

.social h2 { 
    color: pink; 
    font-size: 14px; 
} 

爲了更好地瞭解CSS選擇器以及如何使用它們來引用您的HTML,我建議去通過interactive HTML and CSS tutorials from CodeAcademy。我希望這能幫助你指出正確的方向。

+1

甜蜜,謝謝!這對於H2來說是完美的。有沒有辦法改變H2鏈接?也看起來像div中的H2s是相對的。因此,如果我想要14px字體,它應該小於它應該的尺寸 – Mike

+1

Mike,請嘗試使用如下選擇器:'.social h2 a'來設置鏈接樣式('')元素。 – Blackcoat

5

做鏈接,你可以做

.social h2 a:link { 
    color: pink; 
    font-size: 14px; 
} 

您可以更改懸停,訪問,並主動聯繫過的造型。只需將「鏈接」替換爲您想要的風格即可。你可以在w3schools頁面CSS Links上了解更多。