how to solve in conflict css?

Question

I have a problem in my webpage designing in css. I have this code of structure.

<div id="tabs">
   <ul>
      <li><a href="menu link"></a></li>
      ... other menu ...
   </ul>
   <div id="content">
       ... some codes ...
      <section class="slider">
        <div class="flexslider">
        <ul class="slides">
        <li>
            <img src="image/1.jpg" />
        </li>
                 ... other image ...
            </ul>
        </div>
      </slider>
   </div>

</div>

in #tabs it use the css of #tab ul{} for the design of the navigation bar menu for the ul and li.

when I apply the flexslider in my page, the flexslider's ul and li were also infected with the css design of #tab ul and #tab li.

is there any way that the flexslider's ul and li will not be infected by #tab ul and #tab li?

by the way, I cannot change the structure of the page because it will affect the other pages. I can only edit in the content div.

Answer 1

add .flexsider ul and .flexsider ul li with !important at end.

Answer 2

You can have separate rules for

#tabs > ul

and

.flexslider > ul

Those rules won't propagate to ul deeper in the tree.