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>

或类似的内容，以便您可以轻松区分要设置样式的列表。

Answer 2

然后我会把.body-content .col-middle li {}删掉在设计.body-content li {}的

之后

您唯一的另一个选择是指定li的位置：

.body-content .li-block li { }

Answer 3

你需要：

.body-content > ul li { ... }

这将仅选择ul中.body-content的直接后代的列表项。

编辑：Ooops，错误的地方＆gt; ！

编辑：对不起，也应该提到 - 子选择器在IE6中不起作用。

Answer 4

重新调整中间位置。

div.body-content li {
  color: red;
}

div.col-middle li {
  // overrides stuff
  color: black;
}

样式从父元素向下传递给子元素。

Answer 5

你应该使用，这将只为.body-content

的儿子li设置样式

.body-content > ul li {}

Answer 6

您尝试的代码指定了.body-content中的列表项应该如何看，即使它们位于.col-middle内。

使用CSS2没有任何方法可以做你想要的，可以指定.col-middle之外的列表项应该如何工作，然后指定它们应该如何在.col-middle中设置样式。

然而，使用CSS3，您可以执行以下操作：

:not(.col-middle) li{}

请注意，这在任何IE浏览器中都不起作用。

Answer 7

下面的示例似乎效果最好（我添加了一些额外的标记来演示这一点），但我建议使用样式.body-content，然后在.col-middle中覆盖这些样式。它将是最兼容跨浏览器的。

<!DOCTYPE html>

<html>
<head>
<title></title>
<style type="text/css">
.body-content > *:not(.col-middle) li {
    color: red;
}
</style>
</head>
<body>

<div class="body-content">
  <div class="col-middle">
    <ul>
        <li>item 1</li>
        <li>item 2</li>
    </ul>
  </div>

  <div>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
    </ul>
  </div>

  <ul>
    <li>item 1</li>
    <li>item 2</li>
  </ul>
</div>

</body>
</html>

样式列表某个div中的项目

7 个答案: