html - How to override css using class over css using id? -

html - How to override css using class over css using id? -

in editing wordpress theme having these types of issues. here html code:

<nav id="site-navigation" class="main-navigation span8" style="margin-top:30px" role="navigation">

and here css:

#site-navigation li a, #site-navigation li.home.current-menu-item { color: #efa9bd !important; } .main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a, .main-navigation .current_page_item > a, .main-navigation .current_page_ancestor > { color: #fff !important; font-weight: bold; }

i want override .main-navigation attributes on #site-navigation attributes.

remove !important #site-navigation

html css wordpress