html - why doesn't block <a> within <li> accept color set in css file? -


i trying understand how change color of "a" tags within "li" elements. have following unordered list:

<nav class="navbar navbar-default navbar-fixed-top">   ...   <ul class="nav navbar-nav navbar-left">     <li><a href="#">about</a></li>     <li><a href="#">blog</a></li>     <li><a href="#">contact</a></li>   </ul>   ... </nav> 

why following work:

.navbar-default .navbar-nav li {   color: #333333; }  .navbar-default .navbar-nav li a:hover {   color: #ec5216; } 

but not:

li {   color: #333333; }  li:hover {   color: #ec5216; } 

nor:

a {   color: #333333; }  a:hover {   color: #ec5216; } 

i have read this post, still unclear. ahead of time answers!

that because

.navbar-default .navbar-nav li {  color: #333333; }  .navbar-default .navbar-nav li a:hover { color: #ec5216; } 

has more weight , more specific than

li { color: #333333; }  li:hover { color: #ec5216; } { color: #333333; }  a:hover { color: #ec5216; } 

please read more on css specificity.. https://developer.mozilla.org/en/docs/web/css/specificity


Comments

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -