Question

假设您有以下HTML嵌套列表：

<ul>
  <li>
  List 1
  <ul>
    <li>
    List 2
    <ul>
      <li>
        List 3
        <ul>
          <li>
            List 4
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

所以嵌套列表4深。我想每隔一个风格。我知道我可以这样做：

ul,
ul ul ul {
  color:red;
}

ul ul,
ul ul ul ul {
  color:blue;
}

但这显然只能深入4级，所以如果他们增加了第5级，那么它将无法正常工作。 CSS中是否有一种方法可以自动定位所有其他嵌套列表？

Answer 1

直接来自w3schools：

p:nth-child(odd)
{
 background:#ff0000;
}
p:nth-child(even)
{
 background:#0000ff;
}

＆＃34;所有主流浏览器都支持：nth-child（）选择器，IE8及更早版本除外。＆＃34;

因此，在GIVEN DEPTH，您可以使用它来设置每个其他嵌套列表元素的样式。但是如果你需要一些也考虑到不同深度的东西，你可能需要一个基于javascript的解决方案，然后应用这些CSS3规则。

在这个选择器中也支持简单的公式，但我无法确定它们的工作情况，因为我还没有尝试过，但这里有样本，以防它帮助你：

    p:nth-child(3n+0)
    {
     background:#ff0000;
    }

＆＃34;使用公式（a + b）。描述：a表示循环大小，n是计数器（从0开始），b是偏移值。＆＃34;

这里是w3schools页面，供参考，介绍如何使用该公式：http://www.w3schools.com/cssref/sel_nth-child.asp

使用CSS定位每个其他嵌套列表

1 个答案: