嵌套列表上的 CSS：避免两个列表的样式

Question

我有以下嵌套列表结构：

HTML：

<div id="my_nested_list">
    <ul>
        <li>
            Item label
            <ul>
                <li>Subitem 1</li>
                <li>Subitem 2</li>
                <li>Subitem 3</li>
            </ul>
        <li>
        <li>...</li>      
   </ul>
</div>

CSS：

#my_nested_list>ul {
/* first level list */
}
#my_nested_list>ul>li {
/* first level items */
}
#my_nested_list>ul>li ul {
/* second level list */
}
#my_nested_list>ul>li ul>li {
/* second level items */
}

我的问题是使用空格选择器而不是>，第一级规则适用于第二级。但我需要 ie6 支持，它不支持>。因此我必须使用空间。

到目前为止，我有 2 个解决方案：

1. 在每个 ul 和 li 上放置类，并使用#my_nested_list ul.firstlevel li.firstlevel
2. 使用#my_nested_list ul li 和#my_nested_list ul li ul li 重写每个不需要的第一级规则。

你有更好的想法吗？

Answer 1

正确排序 css 是关键词。

http://jsfiddle.net/wHztz/

CSS：

ul { background: red; }
ul ul { background: green }

ul li { background: yellow; margin: 10px;}
ul ul li { background: blue; }

HTML 与您的问题相同，但减去了 div。

编辑：该死的，在我发布我的答案之后，我总是最终意识到事情......似乎你有这个想法。

关于将类添加到列表中。你只需要把类放到 ul 的 （没关系..这取决于）

---

Edit2：如果你坚持在每个元素上使用类，但真的不关心手动添加它们，你可以这样做：http://jsfiddle.net/wHztz/5/

这会按顺序为每个 ul 分配一个类：ulist1、ulist2、ulist3……当然取决于你有多少个 ul。

---

Edit3：稍微修改了代码。

http://jsfiddle.net/wHztz/6/ - 请注意，我没有更改 CSS 中的任何内容，因此 CSS 在此示例中没有做任何事情。

jQuery:

   $("#my_nested_list > ul, ul ul").each(function (i) {
        i = i+1;
        $(this).addClass("list"+i).children().addClass("list"+i);
   });

这会生成：

<div id="my_nested_list">
    <ul class="list1">
        <li class="list1">
            Item label
            <ul class="list2">
                <li class="list2">Subitem 1</li>
                <li class="list2">Subitem 2</li>
                <li class="list2">Subitem 3</li>
            </ul>
        </li><li class="list1">
        </li><li class="list1">...</li>      
   </ul>          
</div>

你可以很容易地像这样定位：

ul.list1 {}
li.list1 {}

ul.list2 {}
li.list2 {}

---

请注意，您可以更改此部分：

$(this).addClass("list"+i).children().addClass("list"+i);

进入

$(this).addClass("ul"+i).children().addClass("li"+i);

结果就是这样。

<div id="my_nested_list">
    <ul class="ul1">
        <li class="li1">
            Item label
            <ul class="ul2">
                <li class="li2">Subitem 1</li>
                <li class="li2">Subitem 2</li>
                <li class="li2">Subitem 3</li>
            </ul>
        </li><li class="li1">
        </li><li class="li1">...</li>      
   </ul>          
</div>

Answer 2

你的问题不是>选择器，而是需要支持IE6。

我的第一个建议是尽量减少支持这个古老浏览器的要求——即使你不能完全放弃支持，接受它不支持你想要使用的某些东西的事实，并且它结果会看起来很糟糕。如果它在 IE6 中仍然可用，那么你已经完成了这项工作，无论它看起来多么糟糕。

这个建议在这种特定情况下可能无济于事，因为如果您要设置嵌套列表的样式，它可能意味着菜单结构确实需要在两个级别之间设置不同的样式。但总的来说，不要为 IE6 出汗太多；这不值得麻烦。

如果你真的需要一些新奇的 CSS 选择器来在 IE6 中工作，我建议你走 Javascript 路线。有几个很好的库针对旧版本的 IE，并支持各种功能，包括 CSS 选择器。

想到的两个是：

• 首先是 Dean Edwards 的可敬的 IE7.js（以及后续脚本 IE8.js 和 IE9.js）。这个脚本已经存在很长时间了，它为各种版本的 IE 添加了大量功能和错误修复，但主要是 IE6。

• 其次，你可以试试Selectivizr。这是一个更新的脚本，专注于向各种版本的 IE 添加缺少的 CSS 选择器。 Selectivzr 与另一个库配合使用（它可以使用多个库中的任何一个），因此如果您已经在使用 JQuery 或 MooTools 等库，这可能是一个不错的选择。

以上两项都将使 IE6 识别您的 > CSS 选择器（以及其他），因此您的样式表将在 IE6 中工作而无需重写它们。

显然，这两种解决方案都使用 Javascript 来工作，因此如果您的 IE6 用户群习惯于关闭其 Javascript，那么他们最终会导致网站损坏。由您来确定这是一个多么严重的问题以及它会影响多少人。

希望对你有帮助。