0

我有以下嵌套列表结构：

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重写每个不需要的第一级规则。

你有更好的想法吗？

4

2 回答 2

3

正确排序 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>
于 2011-08-01T11:51:38.550 回答
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，那么他们最终会导致站点损坏。由您来确定这是一个多么严重的问题以及它将影响多少人。

我希望这会有所帮助。

于 2011-08-01T19:45:23.043 回答