javascript - jQuery js 文件在 css 样式表之后链接时破坏 css 代码

Question

这里有一个奇怪的，我刚刚设法清除掉了:

我有生成多级下拉菜单的 CSS 代码。我决定在同一页面上为日历日期选择器实现一些 jQuery。得到这个工作，但只是注意到 css 下拉菜单只在 IE 6 中停止工作(我知道，旧的，2% 的使用率，但我想深入了解这个)。

无论如何，经过大量的反复试验，我发现这完全取决于 <script src="/libs/jquery.min.js"></script> 的位置。线是。似乎如果在 css 之后调用 jquery 库(头部部分中的样式表和页面特定内容)，则 css 不起作用，悬停时不会出现菜单。但是，如果我在 css 上方包含 jquery 库，则一切正常。

只是想知道，就 .js 和 .css 的调用顺序而言，有什么我不知道的吗？

这是CSS代码:

(if IE)

body {
behavior: url(csshover.htc);
font-size: 100%;
} 

#stuartFilter ul li {float: left; width: 100%;}
#stuartFilter ul li a {height: 1%;} 

#stuartFilter a, #stuartFilter h2 {
font: bold 11px/16px arial, helvetica, sans-serif;}
(end if)

#stuartFilter a img{border:none;
}

#stuartFilter {
width: auto;
background: rgb(250, 240, 230);
float: left;
}   

#stuartFilter ul {
list-style: none;
margin: 0px;
padding: 3px 0px 0px 0px;
width: 7.5em;
float: left;
background: url(downArrow.png) no-repeat 100% 75%;
}

#stuartFilter a, #stuartFilter h2 {
font: bold 11px/16px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: solid;
border-color: #ccc #888 #555 #bbb;
margin: 0px;
padding: 6px 6px;
}

#stuartFilter h2 {
color: #fff;
background: #000;
text-transform: uppercase;
}

#stuartFilter a {
color: #000;
background: rgb(250, 250, 229);
text-decoration: none;
}

#stuartFilter a:hover {
color: #a00;
background: #fff;
}

#stuartFilter li {position: relative;}

#stuartFilter ul ul {
position: absolute; 
top: 100%;
left: 0%;
width: 12em;
}

#stuartFilter ul ul ul {
position: absolute;
top: 0;
left: 100%;
//width: 11em;
}

div#stuartFilter ul ul,
div#stuartFilter ul li:hover ul ul,
div#stuartFilter ul ul li:hover ul ul,
div#stuartFilter ul ul ul li:hover ul ul,
div#stuartFilter ul ul ul ul li:hover ul ul,
div#stuartFilter ul ul ul ul ul li:hover ul ul
{display: none;}

div#stuartFilter ul li:hover ul,
div#stuartFilter ul ul li:hover ul,
div#stuartFilter ul ul ul li:hover ul,
div#stuartFilter ul ul ul ul li:hover ul,
div#stuartFilter ul ul ul ul ul li:hover ul,
div#stuartFilter ul ul ul ul ul ul li:hover ul
{display: block;}

我刚刚也注意到，当我使用 jquery 的非缩小版本时，它工作正常。奇怪不？!

Answer 1

也许这有点离题，但您示例中的 CSS 实在是太荒谬了:

div#stuartFilter ul li:hover ul,
div#stuartFilter ul ul li:hover ul,
div#stuartFilter ul ul ul li:hover ul,
div#stuartFilter ul ul ul ul li:hover ul,
div#stuartFilter ul ul ul ul ul li:hover ul,
div#stuartFilter ul ul ul ul ul ul li:hover ul
{display: block;}

然而，更重要的是，它会大大降低页面呈现速度(especially in older browsers)，因为选择器都是从右到左解释的。

通过向菜单列表和元素添加特定级别的类可以很容易地解决这个问题，因此选择器将是这样的:

.item_firstlevel:hover .list_secondlevel,
.item_secondlevel:hover .list_thirdlevel

等等。