logo标签列表

在特定的div中为样式列表项进行设置

htmlcss
4

我有一个类似下面的 div 结构：

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

  </div>
</div>

我希望做的是在body-content类中设置列表项样式，并确保它不适用于col-middle内的任何内容。
我认为应该像这样...
.body-content li { }

但是它也将这些样式应用到col-middle中的列表项。
7个回答
5

最简单且向后兼容的选项是：

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>

或者类似的方式，这样您就可以轻松区分您想要设计样式的列表。
1

在设置了 .body-content li { } 样式之后，我会将 .body-content .col-middle li { } 的值设为零。

你唯一的其他选择是指定 li 将要出现的位置：

.body-content .li-block li { }
无论是之后还是之前，只要更具体就没关系。 - Ryan Florence
0

你需要：

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

这将仅选择直接是 .body-content 中 ul 的子元素的列表项。

编辑：哎呀，> 放错位置了！

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

"在IE6中，子选择器无法正常工作" - 就像互联网一样。 - Ryan Florence
哈哈，我和你一样... :) - Mark Bell
0
重新设计 col-middle。
div.body-content li {
  color: red;
}

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

样式从父元素向子元素级联。

0

你应该使用，这将仅为.body-content的子li设置样式

.body-content > ul li {}
0

您尝试的代码指定了仅在 .body-content 内部的列表项应该如何显示，即使它们在 .col-middle 内部也是如此。

使用 CSS2，除了指定 .col-middle 外部的列表项应该如何工作，然后再指定它们在 .col-middle 内部应该如何样式化之外，没有任何方法可以实现您想要的效果。

然而，使用 CSS3，您可以像这样做：

:not(.col-middle) li{}

请注意，这在任何IE浏览器中都不起作用。
0
下面的示例似乎效果最佳（我添加了一些额外的标记以证明这一点），但我建议样式化 .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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接