嵌套列表中的CSS：避免两个列表的样式 [英] CSS on nested list : avoid styling of both lists

问题描述

我有以下的嵌套列表结构：

HTML：

 < div id =my_nested_list> 
< ul> 
< li> 
项目标签
< ul> 
< li>子项1< / li> 
< li>子项2< / li> 
< li>子项3< / li> 
< / ul> 
< li> 
< li> ...< / li> 
< / ul> 
< / div> 
  

CSS：

 code>＃my_nested_list> ul {
 / *第一级列表* / 
} 
＃my_nested_list> ul> li {
 / *第一级项目* / 
} 
＃my_nested_list> ul> li ul {
 / * second level list * / 
} 
＃my_nested_list> ul> li ul> li {
 / *第二级项目* / 
} 
  

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

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

1. 在每个ul和li上放置类，并使用 #my_nested_list ul.firstlevel li.firstlevel


2. 使用 #my_nested_list ul li 和 #my_nested_list ul li ul li 可重写每个不需要的第一级规则。






你有更好的想法吗？

解决方案

> 选择器，需要支持IE6。





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





这个建议可能不会帮助在这个特定的情况下，因为如果你是嵌套列表的样式，它可能意味着一个菜单结构，真正需要在两个级别之间不同的样式。但一般来说，不要为IE6出汗太多;这不值得麻烦。





如果你真的需要一些新奇的CSS选择器工作在IE6，我建议去Javascript路线。有几个好的图书馆，其目标旧版本的IE，并支持各种功能，包括CSS选择器。





/ p>






• 首先，尊敬的 IE7.js （以及后续脚本IE8.js和IE9.js）。




• 其次，你可以尝试一下这个脚本， 选择性。这是一个更新的脚本，重点是添加丢失的CSS选择器到各种版本的IE。 Selectivzr与另一个库（它可以使用任何一个库）结合使用，所以如果你已经使用了一个库，如JQuery或MooTools，这可能是一个不错的选择。







上述两个操作都将使IE6识别您的> CSS选择器样式表将在IE6中工作，而不需要重写它们。





显然，这两个解决方案都使用Javascript来工作，所以如果你的IE6用户基础是习惯关闭他们的Javascript，然后他们将最终与一个破碎的网站。





我希望对你有帮助。




I have the folowing nested list structure:

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 */
}

My problem is that with space selector instead of >, first level rules apply on the second level. But i need ie6 support, which does not support >. Thus i have to use space.

So far i have 2 solutions:

1. put classes on every ul and li, and use #my_nested_list ul.firstlevel li.firstlevel
2. use #my_nested_list ul li, and #my_nested_list ul li ul li to rewrite every unwanted first level rule.

Do you have better ideas?

解决方案

Your problem isn't the > selector, it's the need to support IE6.

My first advice would be to try to minimise your requirement to support this ancient browser -- even if you can't drop support entirely, accept the fact that it doesn't support some things you want to use, and that it'll look bad as a result. If it is still usable in IE6, then you've done the job, no matter how bad it looks.

This advice probably won't help in this specific case, because if you're styling nested lists, it probably means a menu structure which really needs to be styled differently between the two levels. But in general, don't sweat it too much for IE6; it's not worth the hassle.

If you really need to get some new-fangled CSS selector to work in IE6, I would recommend going the Javascript route. There are several good libraries out there which target older versions of IE, and hack in support for various features, including CSS selectors.

The two that spring to mind are:

• Firstly the venerable IE7.js by Dean Edwards (and the follow-on scripts, IE8.js and IE9.js). This script has been around for ages, and adds a raft of features and bug fixes to various version of IE, but primarily IE6.

• Secondly, you could try Selectivizr. This is a much newer script which focuses on adding missing CSS selectors to various versions of IE. Selectivzr works in conjunction with another library (it can use any one of several), so if you're already using a library such as JQuery or MooTools, this may be a good choice.

Both of the above will make IE6 recognise your > CSS selector (among others), and thus your stylesheets will work in IE6 without any need to rewrite them.

Obviously, both these solutions use Javascript to work, so if your IE6 user base is in the habit of switching off their Javascript then they'll end up with a broken site. It is for you to determine how serious an issue this is and how many people it will affect.

I hope that helps.

这篇关于嵌套列表中的CSS：避免两个列表的样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！