我希望其中一个Navbar标签看起来与其他标签完全不同。 出于某种原因，我想在悬停状态下显示的选项卡的文本颜色适用于某些浏览器，但不适用于其他浏览器。似乎也是断断续续的。 选项卡的文本＆＃34;现在预留＆＃34;应该是链接状态的浅绿色＆amp;在悬停状态下变为深绿色。 背景颜色正确变化但文本不变。 主要不在Safari中工作。
有什么想法？ 提前感谢您的意见。
这是指向文件的链接：http://www.buzzpunchmedia.com/kuyaba/stack.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NavBar</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.body-modal {
}
</style>
<link href="stack.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
</head>
<body>
<div class="container-fluid" id="wrapper">
<div class="container-fluid" id="nav-container">
<nav class="navbar navbar-default">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#defaultNavbar1"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button>
<a class="navbar-brand menu-top" href="#">Menu <span class="glyphicon glyphicon-hand-right"></span></a></div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="defaultNavbar1">
<ul class="nav navbar-nav navbar-right">
<li id="nav-home"><a href="#"><span class="glyphicon glyphicon-home"></span> Home</a></li>
<li id="nav-rooms"><a href="#">Rooms</a></li>
<li id="nav-restaurant"><a href="#">Restaurant</a></li>
<li id="nav-bar"><a href="#">Bar</a></li>
<li class="dropdown" id="nav-more"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">More<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="active active-text"><a href="#">Gallery/Tour</a></li>
<li><a href="#">About/History</a></li>
<li><a href="#">Functions</a></li>
<li><a href="#">Gift Shop</a></li>
</ul>
</li>
<li id="nav-gallery"><a href="#">Gallery/Tour</a></li>
<li id="nav-about"><a href="#">About/History</a></li>
<li id="nav-functions"><a href="#">Functions</a></li>
<li id="nav-giftshop"><a href="#">Gift Shop</a></li>
<li class="nav-book" id="nav-book"><a href="#">RESERVE NOW</a></li>
</ul> </div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.2.min.js"></script>
</body>
</html>
<!
#wrapper {
padding-right: 0px;
padding-left: 0px;
background-image: url(images/bamboo_back.jpg);
background-repeat: repeat;
}
.navbar.navbar-default {
border-width: 0px;
border-radius: 0px;
background-color: #BFBFBF;
margin-top: 0px;
margin-bottom: 0px;
}
#nav-container {
background-color: #BFBFBF;
box-shadow: 0px 7px 10px 0px #212121;
position: relative;
z-index: 8;
}
.menu-top {
display: none;
}
.glyphicon.glyphicon-home {
font-size: 16px;
}
#nav-home {
font-size: 20px;
}
#nav-rooms {
font-size: 20px;
}
#nav-restaurant {
font-size: 20px;
}
#nav-bar {
font-size: 20px;
}
#nav-more {
font-size: 20px;
}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
background-color: #73a014 !important;
background-image: -webkit-linear-gradient(270deg,rgba(115,160,20,1.00) 0%,rgba(115,160,20,1.00) 100%);
background-image: -moz-linear-gradient(270deg,rgba(115,160,20,1.00) 0%,rgba(115,160,20,1.00) 100%);
background-image: -o-linear-gradient(270deg,rgba(115,160,20,1.00) 0%,rgba(115,160,20,1.00) 100%);
background-image: linear-gradient(180deg,rgba(115,160,20,1.00) 0%,rgba(115,160,20,1.00) 100%) !important;
background-repeat: repeat-x !important;
color: #FFFFFF;
outline: 0 none;
text-decoration: none;
font-size: 16px;
}
#nav-book {
font-size: 20px;
color: #73A014;
}
.active-text {
font-size: 20px;
}
.nav-book, .nav-book:focus {
text-align: center;
color: #CFF879 !important;
font-size: 20px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
background-color: #73a014;
background-image: -webkit-linear-gradient(270deg,rgba(154,199,60,1.00) 0%,rgba(115,160,20,1.00) 86.53%);
background-image: -moz-linear-gradient(270deg,rgba(154,199,60,1.00) 0%,rgba(115,160,20,1.00) 86.53%);
background-image: -o-linear-gradient(270deg,rgba(154,199,60,1.00) 0%,rgba(115,160,20,1.00) 86.53%);
background-image: linear-gradient(180deg,rgba(154,199,60,1.00) 0%,rgba(115,160,20,1.00) 86.53%);
}
.nav-book:hover, .nav-book:active, .nav-book.active, .open .dropdown-toggle.nav-book {
color: #73a014 !important;
font-size: 20px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
background-color: #CFF879;
background-image: -webkit-linear-gradient(270deg,rgba(157,219,29,1.00) 0%,rgba(207,248,121,1.00) 54.92%);
background-image: -moz-linear-gradient(270deg,rgba(157,219,29,1.00) 0%,rgba(207,248,121,1.00) 54.92%);
background-image: -o-linear-gradient(270deg,rgba(157,219,29,1.00) 0%,rgba(207,248,121,1.00) 54.92%);
background-image: linear-gradient(180deg,rgba(157,219,29,1.00) 0%,rgba(207,248,121,1.00) 54.92%);
}
#nav-gallery {
display: none;
}
#nav-giftshop {
display: none;
}
#nav-functions {
display: none;
}
#nav-about {
display: none;
}
答案 0 :(得分：1)
您的CSS中存在选择器和特异性问题，其中您的规则并未真正定位到列表项中的锚点（您可以在选择锚点时看到检查器工具中缺少样式）。要解决此问题，只需在.nav-book类名称中定义锚点的定位链，如下所示：
/* abstracted the list-item styles from the anchor styles */
.nav-book {
background-color: #73a014;
background-image: -webkit-linear-gradient(270deg, rgba(154,199,60,1.00) 0%, rgba(115,160,20,1.00) 86.53%);
background-image: -moz-linear-gradient(270deg, rgba(154,199,60,1.00) 0%, rgba(115,160,20,1.00) 86.53%);
background-image: -o-linear-gradient(270deg, rgba(154,199,60,1.00) 0%, rgba(115,160,20,1.00) 86.53%);
background-image: linear-gradient(180deg, rgba(154,199,60,1.00) 0%, rgba(115,160,20,1.00) 86.53%);
text-align: center;
}
.navbar-default .navbar-nav .nav-book > a,
.navbar-default .navbar-nav .nav-book > a:focus {
color: #cff879;
font-size: 20px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
}
.navbar-default .navbar-nav .nav-book > a:hover,
.navbar-default .navbar-nav .nav-book > a:active,
.navbar-default .navbar-nav .nav-book.active > a,
.open .dropdown-toggle.nav-book {
color: #73a014;
font-size: 20px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
background-color: #cff879;
background-image: -webkit-linear-gradient(270deg, rgba(157,219,29,1.00) 0%, rgba(207,248,121,1.00) 54.92%);
background-image: -moz-linear-gradient(270deg, rgba(157,219,29,1.00) 0%, rgba(207,248,121,1.00) 54.92%);
background-image: -o-linear-gradient(270deg, rgba(157,219,29,1.00) 0%, rgba(207,248,121,1.00) 54.92%);
background-image: linear-gradient(180deg, rgba(157,219,29,1.00) 0%, rgba(207,248,121,1.00) 54.92%);
}
注意链如何从导航项的顶层.navbar-default .navbar-nav开始，这是因为我们必须覆盖bootstraps CSS的特殊性（因此我们可以逃避有害规则，例如{{1} }）。