是否需要整行CSS来更改背景颜色?

时间:2018-09-13 08:35:46

标签: css wordpress

我一直在尝试删除导航栏上“主页”按钮的背景颜色。

我使用了以下代码,这完成了我想做的事情:

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
	background-color:#818d89;
}

我只是想知道这是否是错误的编码,是否所有必要的东西都写了?

这是我要删除的白色框/颜色与导航栏相同

<div class="container">
						<div class="navbar-header">
			<div class="title-logo-wrapper">
				<a class="navbar-brand" href="http://localhost/wordpress/" title="">
					<img src="http://localhost/wordpress/wp-content/uploads/2018/09/cropped-RCT-logo-1.png" alt=""></a>
			</div>
								<div class="navbar-toggle-wrapper">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navigation">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="sr-only">Toggle Navigation</span>
			</button>
					</div>
				</div>
		<div id="main-navigation" class="collapse navbar-collapse"><ul id="menu-navigation" class="nav navbar-nav"><li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-16 active"><a title="Home" href="http://localhost/wordpress">Home</a></li>
<li id="menu-item-92" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-92"><a title="About Us" href="http://localhost/wordpress/about/">About Us</a></li>
<li id="menu-item-94" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-94"><a title="Sponsorship" href="http://localhost/wordpress/sponsorship/">Sponsorship</a></li>
<li id="menu-item-95" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-95"><a title="Blog" href="http://localhost/wordpress/blog/">Blog</a></li>
<li id="menu-item-487" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-487 dropdown"><a title="Get Involved" href="#" class="dropdown-toggle">Get Involved <span class="caret-wrap"><span class="caret"></span></span></a>
<ul role="menu" class="dropdown-menu">
	<li id="menu-item-479" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-479"><a title="Tell us your story" href="http://localhost/wordpress/tell-us-your-story/">Tell us your story</a></li>
	<li id="menu-item-482" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-482"><a title="Volunteer" href="http://localhost/wordpress/volunteer/">Volunteer</a></li>
	<li id="menu-item-486" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-486"><a title="Tours and Visits" href="http://localhost/wordpress/tours-and-visits/">Tours and Visits</a></li>
</ul>
</li>

<a title="Home" href="http://localhost/wordpress">Home</a>
<li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-16 active"><a title="Home" href="http://localhost/wordpress">Home</a></li>

1 个答案:

答案 0 :(得分:1)

取决于html,您可以使用parent的元素ID。

#home_box > a:hover {
background-color:#818d89;
}

如果您提供html,我将编辑答案。