样式列表某个div中的项目

Question

我有一个像底部的div结构:

<div class="body-content">
  <div class="col-middle">

  </div>
</div>

我想要做的是在body-content类中的列表项上设置一个样式,并确保它不适用于col-middle中的任何内容

我以为它会像......

.body-content li { }

但它也应用这些样式来列出col-middle中的项目.

Answer 1

最简单,最向后兼容的选项是:

div.body-content li { /* some style */ }
div.col-middle li { /* some other style */ }

您可以使用子选择器:

div.body-content > ul li

但它在IE6中不受支持.

除此之外,它取决于您的标记的确切编写方式以及您对浏览器支持的要求.

如果可能,请将您的标记更改为:

<div class="body-content">
  <div class="col-middle">
  ...
  </div>
  <div class="col-other">
  ...
  </div>
</div>

或类似的东西,这样你就可以很容易地区分你想要样式的列表.