仅在 Firefox 9 中测试(到目前为止)。
在下面的 HTML 中，如果您将 class="yui3-skin-sam" 从 BODY 标签移动到 main_menu DIV 标签，如下所示:
<div id="main_menu" class="yui3-skin-sam yui3-menu yui3-menu-horizontal yui3-menubuttonnav">
你会得到一个非常不同的外观(菜单背景中的图形丢失了)。但是，如果我将我的 main_menu DIV 和其他应用 class="yui3-skin-sam" 皮肤的 DIV 包装起来，它就可以正常工作。为什么？是否可以让它在一个 DIV 上工作，就像它在整个 BODY 和包装的 DIV 上工作一样？
<html>
<head>
<script src="http://yui.yahooapis.com/3.5.0/build/yui/yui-min.js">
</script>
</head>
<body class="yui3-skin-sam">
<div id="main_menu" class="yui3-menu yui3-menu-horizontal yui3-menubuttonnav">
<div class="yui3-menu-content">
<ul class="first-of-type">
<li class="yui3-menu-item">
<a class="yui3-menuitem-content" href="#">Home</a>
</li>
<li>
<a class="yui3-menu-label" href="#search_menu"><em>Search</em></a>
<div id="search_menu" class="yui3-menu">
<div class="yui3-menu-content">
<ul>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content" href="http://www.google.ca">Google</a>
</li>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content" href="http://www.yahoo.ca">Yahoo</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<script>
YUI().use('node-menunav', function(Y)
{
var menu = Y.one("#main_menu");
menu.plug(Y.Plugin.NodeMenuNav);
menu.get("ownerDocument").get("documentElement").removeClass("yui3-loading");
});
</script>
</body>
最佳答案
几乎所有的 YUI 小部件都使用看起来像这样的 CSS 样式声明
.yui3-skin-sam .yui3-some-widget-name ... {
...
}
而不是
.yui3-skin-sam.yui3-some-widget-name ... {
...
}
因此有一个隐含的假设，即小部件位于某个具有外观类的容器的子容器中。这通常最有意义，因为通常您希望将一堆具有一致外观的小部件组合在一起。所以(正如您发现的那样)应用皮肤的最简单方法是只包含一个额外的 div 将皮肤类应用到菜单。
关于css - YUI3 皮肤类位置改变外观，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10143615/