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支持，它不支持>。因此我必须使用空间。

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

在每个ul和li上放置类，并使用#my_nested_list ul.firstlevel li.firstlevel
使用#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 ......取决于你当然有多少个。

编辑3：稍微更改了代码。

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，那么他们最终会破坏网站。这是为了确定问题的严重程度以及它将影响的人数。

我希望有所帮助。

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

2 个答案: