CSS Hover 自定义一个菜单项答案

【问题标题】：CSS Hover Customize One Menu ItemCSS Hover 自定义一个菜单项
【发布时间】：2016-08-01 01:56:43
【问题描述】：

HTML：

    <div class="container-fluid nav-con">
      <div class="navbar-header">

        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <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" href="#">Navigation</a> </div>
      <div id="navbar" class="navbar-collapse collapse">
<ul id="menu-header" class="nav navbar-nav">
  <li id="menu-item-1368" class="menu-item menu-item-type-post_type 
menu-item-object-page menu-item-1368">
<a href="http://localhost/www/">Home</a></li>

<li id="menu-item-1632" class="menu-item menu-item-type-post_type menu-item-object-page 
menu-item-1632">
<a href="http://localhost/www/artists/">Artists</a></li>

<li id="menu-item-1369" class="menu-item menu-item-type-post_type menu-item-object-page 
menu-item-1369">
<a href="http://localhost/www/store/">Store</a></li>

<li id="menu-item-3569" class="bp-menu bp-profile-nav menu-item menu-item-type-custom 
menu-item-object-custom menu-item-3569">
<a href="http://localhost/www/members/">Members Area</a></li>

</ul></div></div>
</nav>

CSS：

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
        border: 0;
        color: #000 !important;
        background: #ddd;
        text-shadow: 0 -1px 1px #fff;
}

以上 CSS 适用于所有菜单项，悬停时使菜单项的背景为#ddd，文本颜色为黑色。

现在我正在尝试更改一个特定菜单项的 CSS - “会员区”

我已经尝试使用“menu-item-3569”，但它不起作用

.navbar-default .menu-item-3569 .navbar-nav>li>a:focus, .navbar-default .menu-item-3569 
.navbar-nav>li>a:hover {
        color: #EC442F !important;
}

我认为因为这是多层次的，所以让我对正确的语法感到困惑。有什么帮助吗？

【问题讨论】：

标签： html css

【解决方案1】：

在 CSS 中，. 用于表示class。

menu-item-3569 是 id - 它用 # 表示。

因此，而不是：

.navbar-default .menu-item-3569 .navbar-nav>li>a:focus,
.navbar-default .menu-item-3569 .navbar-nav>li>a:hover

试试：

.navbar-nav li#menu-item-3569 a:focus,
.navbar-nav li#menu-item-3569 a:hover {
        color: #EC442F;
}

【讨论】：