Question

我是初学者，目前正在我的主页上创建自己的导航栏，并且在更改字体（颜色，字体系列等）时遇到了一些问题。

默认情况下，导航栏中的链接（主页，联系人，商店等）将格式化为链接，因为它们是链接。我已经进入我的style.css文件并声明了一个新ID，a.nav {}但我不知道如何让我的导航栏使用它而不是默认的{}。

这是我在header.php文件中的代码：

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

这是我在style.css文件中的代码：

## Links
--------------------------------------------------------------*/
a {
	color:#000;
}

a:visited {
	/*color:#454545;*/
}

a:hover,
a:focus,
a:active {
	color: #fff;
	text-decoration:bold;
}

a:focus {
	outline:none;
}

a:hover,
a:active {
	outline: 0;
	
}

/* Links - home.site-nav */
a.nav:link {
	font-family: montserrat;
	font-weight: 100;
	font-style: normal;
	color:#fff;
}

a.nav:visited {
	/*color:#454545;*/
}

a.nav:hover,
a.nav:focus,
a.nav:active {
	color: #fff;
	text-decoration:bold;
}

a.nav:focus {
	outline:none;
}

a.nav:hover,
a.nav:active {
	outline: 0;
	
}

我想要的是我的导航栏使用新声明的a.nav类而不是a。有什么想法吗？

Answer 1

如果我是你，我会选择

.site-nav a { 

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

}

而不是创建一个新类。这应该适用于菜单中的链接，而无需编辑HTML本身。

但请注意，每次Wordpress或主题更新时都会重置style.css文件，因此请确保备份。（或者你可以创建一个子主题，但如果你是Wordpress的新手，我不建议这样做。）

Answer 2

直接对主题style.css所做的任何更改都将被下一个主题更新覆盖。因此，最好在Customize＆gt;下添加自定义CSS。额外的CSS。

接下来，我们需要了解CSS中的优先级。我们需要牢记这4条规则（更好地解释here）。

内联css（html样式属性）会覆盖样式标记和css文件中的css规则。
更具体的选择器优先于不太具体的选择器。
如果两者具有相同的特异性，那么稍后出现在代码中的规则会覆盖之前的规则。
带有！important的css规则始终优先。

在您的示例中，为了确保您的样式优先，它需要在此块内以及它的变体（悬停，活动等等）：

nav .site-nav a {
}

如果您仍然看不到任何更改，可以在该属性旁边添加!important。示例：color: #fff !important;。

希望这会有所帮助。祝你好运！

更改导航栏字体

2 个答案: