相关疑难解决方法(0)

我的侧边栏中有一个分层导航菜单,它使用嵌套列表(<ul>和<li>标签).我正在使用预制主题已经有列表项的样式,但我想改变顶级项的样式,但不适用于子项.是否有一种简单的方法可以将样式应用于顶级列表项标记而不将这些样式级联到其子项列表项？我明白我可以明确地为子项添加重写样式但我真的希望避免重复所有样式代码,如果有一种简单的方法只是说"将这些样式应用于此类并且不要级联他们归结为任何儿童元素".这是我正在使用的HTML:

<ul id="sidebar">
  <li class="top-level-nav">
    <span>HEADING 1</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
  <li class="top-level-nav">
    <span>HEADING 2</span>
    <ul>
      <li>sub-heading A</li>
      <li>sub-heading B</li>
    </ul>
  </li>
</ul>

所以css已经有了"#sidebar ul"和"#sidebar ul li"的样式,但我想在"#sidebar .top-level-nav"中添加其他样式,这些样式不会级联到它的子孙.是否有任何方法可以简单地执行此操作,或者我是否需要重新排列所有样式,以便"#sidebar ul"上的样式现在特定于某些类.

.content {
  float: left;
  width: 100%;
  background-image: url('images/zwemmen.png');
  height: 501px;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
}

.opacity {
  background-color: rgba(5, 98, 127, 0.9);
  height: 100%;
  overflow: hidden;
}

.info {
  float: left;
  margin: 100px 0px 0px 30px;
  width: 410px;
}

<div class="content">
  <div class="opacity">
    <div class="image">
      <img src="images/zwemmen.png" alt="" />
    </div>
    <div class="info">
      a div wih all sort of information
    </div>
  </div>
</div>

如果我不想模糊按钮,我需要做什么？

http://jsfiddle.net/L8ksa46g/