2013-05-11 107 views
0

當我指定div中的a標籤時,其字體系列似乎僅影響div中的文本,但不影響a標籤中的文本。爲什麼是這樣,它如何解決?標籤內的字體家族

<div style="font-family: 'Times New Roman', Times, serif"> Hello world! <a href="www.google.com"> Click here! </a> </div> 
+1

您可能有一個覆蓋div風格的規則。使用螢火蟲鉻開發工具來檢查該元素,並看看它顯示你。 – 2013-05-11 03:24:51

+1

http://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css – 2013-05-11 03:27:33

+0

屬性'href =「www.google.com」'是一個奇怪的例子,因爲值是一個相對URL,與「http:// www.google.com」非常不同。 – 2013-05-11 06:54:15

回答

0

正如@John在評論中提到的;你可能有一些其他的CSS鏈接文件覆蓋你的font-family。您可以使用內聯繼承屬性,因爲您的div也有樣式定義內聯

<a href="www.google.com" style="font-family: inherit;"> Click here! </a> 
+0

使用'inherit'通常不是一個好主意,部分原因是它引入了一個通常不必要的瀏覽器依賴:'inherit'無法被IE 7識別。 – 2013-05-11 06:52:55

0

描述的問題不是由發佈的代碼,即,原因是,這不是所公開的的代碼部分引起的。通常,設置例如一個元素上的font-family僅影響元素中的文本,而不影響文本包裹在內部元素中。但是,如果內部元素沒有使用CSS規則(在作者,用戶或瀏覽器樣式表中),則內部元素從其父級繼承font-family。但在這種情況下,顯然一個CSS規則,它在a元素上設置font-family

修復取決於使用其他CSS代碼。這似乎不是一個真實的案例,而只是一個練習,所以最好使用不同的方法,例如,

<div class="foobar"> Hello world! <a href="www.google.com"> Click here! </a> </div> 

與鏈接外部樣式表或頁面上的style元素中下面的CSS代碼:

.foobar, .foobar a { font-family: 'Times New Roman', Times, serif } 

通過反映該元件的含義或角色的名稱替換foobar,只是使代碼更易於人類閱讀。

但是,根據該a元素上設置font-family現在其他的CSS代碼,您可能需要使用更具體的選擇,或!important符,或兩者兼而有之。