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
Post a Comment