CSSホバーカスタマイズ1つのメニュー項目

Question

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：ホバーメニュー項目との背景#dddを作る時に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; 
} 

は、すべてのメニュー項目に適用されますテキストの色は黒です。

は今、私は1つの特定のメニュー項目のCSSを変更しようとしています - 「メンバーエリア」

を私は「メニュー項目-3569」で、これを試してみましたが、それは

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

が動作していませんこれは多層化されているため、適切な構文で私を混乱させていると思います。どんな助け？

Answer 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; 
}