更改導航欄字體

-1

我是一名初學者，目前正致力於在我的主頁上創建自己的導航欄，並且在更改字體（顏色，字體系列等）時遇到了一些問題。更改導航欄字體

默認情況下，我的導航欄（主頁，聯繫人，商店等）中的鏈接格式化爲鏈接，因爲它們是鏈接。我進入了我的style.css文件並聲明瞭一個新的ID，a.nav {}，但我不確定如何讓我的導航欄使用此ID而不是默認的{}。

這是我在我的header.php文件中的代碼：

\t \t <nav class="site-nav"> 
 
\t \t \t <?php 
 
\t \t \t $args = array(
 
\t \t \t \t 'theme_location' => 'primary' 
 
\t \t \t \t ); 
 
\t \t \t ?> 
 
\t \t \t 
 
      <?php wp_nav_menu( $args); ?> 
 
      </nav> 
 
\t \t </header>

這是代碼我在我的style.css文件：

## Links 
 
--------------------------------------------------------------*/ 
 
a { 
 
\t color:#000; 
 
} 
 

 
a:visited { 
 
\t /*color:#454545;*/ 
 
} 
 

 
a:hover, 
 
a:focus, 
 
a:active { 
 
\t color: #fff; 
 
\t text-decoration:bold; 
 
} 
 

 
a:focus { 
 
\t outline:none; 
 
} 
 

 
a:hover, 
 
a:active { 
 
\t outline: 0; 
 
\t 
 
} 
 

 
/* Links - home.site-nav */ 
 
a.nav:link { 
 
\t font-family: montserrat; 
 
\t font-weight: 100; 
 
\t font-style: normal; 
 
\t color:#fff; 
 
} 
 

 
a.nav:visited { 
 
\t /*color:#454545;*/ 
 
} 
 

 
a.nav:hover, 
 
a.nav:focus, 
 
a.nav:active { 
 
\t color: #fff; 
 
\t text-decoration:bold; 
 
} 
 

 
a.nav:focus { 
 
\t outline:none; 
 
} 
 

 
a.nav:hover, 
 
a.nav:active { 
 
\t outline: 0; 
 
\t 
 
}

我想要的是我的導航欄使用新聲明的a.nav類而不是a。有任何想法嗎？

來源

2017-09-05 chris_852

因此，將該類添加到CSS文件中的所有選擇器。這是你問的嗎？目前尚不清楚在嘗試使用CSS類時遇到什麼問題。請注意，你的類名不是'nav'，它是'site-nav'。 – csmckelvey

爲什麼不簡單設計'

或者使用現有的選擇器並指定足夠的選擇器，同時聲明您的規則超出所應用的默認或供應商樣式。 – UncaughtTypeError

如果我是你，我會選擇

.site-nav a { 

color:black; 
font-size: 15px; 
/*etc*/ 

}

而不是創建一個新的類。這應該適用於菜單中的鏈接，而不需要編輯HTML本身。

但是，請注意，style.css文件將在每次Wordpress或主題更新時重置，因此請確保您有備份。（或者你可以創建一個兒童主題，但如果你是新手，我不會推薦這個）。

來源

2017-09-05 14:05:56 Tijmen

這很完美！非常感謝你的幫助。正如我上面的帖子所說，我是一個初學者，所以這從來沒有真正發生過。:) –

我已經備份了所有的文件我已經編輯過，也安裝了一個插件來停止主題更新。感謝提示，我沒有意識到這一點！ –

直接對主題style.css所作的任何更改將被下一主題的更新覆蓋。因此，最好在Customize> Additional CSS下添加自定義CSS。

接下來，我們需要了解什麼在CSS中優先。我們需要記住這4條規則（更好地解釋爲here）。

內嵌CSS（html樣式屬性）覆蓋樣式標記和CSS文件中的CSS規則。
更具體的選擇器優先於不太具體的選擇器。
在代碼後面出現的規則會覆蓋較早的規則，如果兩者具有相同的特徵。
帶有！重要的css規則總是優先。

在你的榜樣，以確保您的樣式優先它需要此塊中，它的變化（懸停，活動...等）：

nav .site-nav a { 
}

如果你不能看到任何更改仍然可以，您可以添加!important旁邊的屬性。例如：color: #fff !important;。

希望這會有所幫助。祝你好運！

來源

2017-09-05 14:24:09 Sheedo

人們不應該使用'！important''來安全'。應該只使用標誌[作爲最後的手段]（https://stackoverflow.com/questions/8360190/is-it-bad-to-use-important-in-css-property#8360237），以便維護未來的可更新性 – Tijmen

@Tijmen你說得對，編輯我的答案。 – Sheedo

更改導航欄字體

回答

相關問題