css - 嵌套导航菜单中的不同样式

Question

我正在使用 ul ul ul li 在 html5 中开发嵌套导航菜单，但我希望第 3 层元素的宽度根据选择的顶级菜单元素而不同。因此，如果我从菜单项 1 开始，我希望底部元素的宽度为 100 像素，但如果我从菜单项 2 开始，我希望底部元素的宽度为 200 像素。

我认为我应该能够使用内联样式定义在列表中顶级元素的 html 代码之间重新定义 ul ul ul li 的样式，但我找不到正确的语法。首先，我这样做的方式正确吗？如果是这样，语法是什么？

ul ul ul li { width:100px }

好像不行。有什么建议吗？

Answer 1

这不会直接回答您的问题，但会帮助您了解如何通过 CSS 操作子元素。

您可以使用 nth-child 从子列表中进行选择，以下样式从所有无序列表中选择第三行。

ul li:nth-child(3) {  
  color: #ccc;
}

参见 https://css-tricks.com/how-nth-child-works/看看它是如何工作的。

或者我的简单示例:JSfiddle