Как изменить цвет и цвет фона одного текстового элемента в строке заголовка заголовка заголовка при зависании?

Question

HTML

<!-- start nav here --> 
<nav> 
    <ul> 
    <li><a href="#">About Us</a></li> 
    <li><a href="#">Our History</a></li> 
    <li><a href="#">Services</a></li> 
    <li><a href="#">Products</a></li> 
    <li> 
     <aa href="#">Contact Us</a> 
    </li> 
    </ul> 
</nav> 
<!-- end nav here --> 

CSS

header nav li { 
    background-color: #CECDC0; 
    font-size: 20px; 
    font: Noteworthy; 
    color: blue; 
    float: left; 
    margin: 10px; 
    margin-top: -2px; 
    } 

    header nav { 
    display: block; 
    float: right; 
    line-height: -30px; 
    } 

    header nav li a:hover { 
    color: red; 
    } 

Когда я добавить эффект парения, как в приведенном выше примере, это делает весь текст в навигационной панели парении. Я хочу, чтобы «О нас» имел другой цвет фона и цвет шрифта. Как редактировать html или css?

Answer 1

Вы можете сделать это, чтобы выбрать первый пункт (About Us):

header nav li:first-child a:hover { 
color: red; 
} 

Answer 2

Вы можете используешь класс для целевого конкретного элемента списка.

Jsfiddle.

HTML

<nav> 
    <ul> 
    <li class="target"><a href="#">About Us</a></li> 
    <li><a href="#">Our History</a></li> 
    <li><a href="#">Services</a></li> 
    <li><a href="#">Products</a></li> 
    <li><a href="#">Contact Us</a></li> 
    </ul> 
</nav> 

CSS

nav li { 
    background-color: #CECDC0; 
    font-size: 20px; 
    font: Noteworthy; 
    color: blue; 
    float: left; 
    margin: 10px; 
    margin-top: -2px; 
} 

nav { 
    display: block; 
    float: right; 
    line-height: -30px; 
} 

nav li a:hover { 
    color: red; 
} 

.target a:hover { 
    color: #fff; 
    background-color: gold; 
} 

Answer 3

Я не был уверен, что именно вы хотели, но после это моя интерпретация.

https://jsfiddle.net/Vuice/1dodL81o/

HTML

<header> 
    <!-- start nav here --> 
    <nav> 
    <ul> 
     <li><a href="#">About Us</a></li> 
     <li><a href="#">Our History</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Products</a></li> 
     <li><a href="#">Contact Us</a></li> 
    </ul> 
    </nav> 
    <!-- end nav here --> 
</header> 

CSS

header nav li { 
    background-color: #CECDC0; 
    font-size: 20px; 
    font: Noteworthy; 
    color: blue; 
    float: left; 
    margin: 10px; 
    margin-top: -2px; 
} 
header nav { 
    display: block; 
    float: right; 
    line-height: -30px; 
} 
header nav li a:hover { 
    color: red; 
} 
header nav li:first-child a:hover { 
    color: yellow; 
    background-color: green; 
} 

Answer 4

Это один является более чистым, поскольку родительский элемент должен быть раньше, чем ребенок.

nav { 
 
    display: block; 
 
} 
 
nav li{ 
 
    display: inline-block; 
 
    float: left; 
 
    margin: 10px; 
 
    margin-top: -2px; 
 
} 
 
nav li a{ 
 
    background-color: #CECDC0; 
 
    font-size: 20px; 
 
    font: Noteworthy; 
 
    color: blue; 
 
    padding:5px 2px; 
 
    line-height: 30px; 
 
    text-decoration:none; 
 
} 
 
nav li:first-child a:hover { 
 
    color: #fff; 
 
    background-color: gold; 
 
} 
 
nav li a:hover { 
 
    color: red; 
 
}

<nav> 
 
<ul> 
 
<li><a href="#">About Us</a></li> 
 
<li><a href="#">Our History</a></li> 
 
<li><a href="#">Services</a></li> 
 
<li><a href="#">Products</a></li> 
 
<li><a href="#">Contact Us</a></li> 
 
</ul> 
 
</nav>