选择ul到一定深度

Posted 2023-03-06

【中文标题】选择ul到一定深度

【英文标题】：Select ul up to a certain depth

【发布时间】：2015-09-02 21:46:57

【问题描述】：

ul, ul ul, ul ul ul 
    list-style: none;
    margin: 0;
    padding: 0;

问题：是否有选择器，所以我可以使用它为每个 n-deep ul 应用样式？

例如：

ul > ul

【问题讨论】：

“每个 n-deep ul”是什么意思？您想在特定级别为每个 ul 设置样式吗？什么不适用于您拥有的解决方案？您能否举例说明当前解决方案的预期结果和实际结果？

当我使用ul, ul ul, ul ul ul, ul ul ul ul, ... 时，它适用于 4 深度解决方案。如果我有 20 深的 ul 怎么办？我不想定义所有这些

如果你有超过 3 个深度 ul，你可能首先需要重新考虑你的方法......但除此之外......没有。

通过定义一个类并将该类应用于您想要的ul 会更简单

如果你想为每个 UL n-level 设置不同的样式，请使用 CssClasses，否则，你需要输入 ul > li > ul > li > ul ... 但是，如果你想完全设置所有级别的样式同样，只需ul 即可。

【参考方案1】：

您应用的属性通常会重置我们在 ul 元素上所做的操作，因此编写类似

ul 
  //Reset properties

足以让它在任何级别的 dom 中应用。

仍然由于某种原因，如果您想针对特定级别的特定属性，您需要使用>，但请确保您不能编写 ul > ul，这是错误的，因为您不能嵌套 @987654326 @元素作为ul的直接子元素。

因此，如果您想专门针对 ul 而不是一般重置，则不要在 ul 的第一级周围使用包装器元素并使用类似的选择器

.wrapper ul 
  //targets all ul nested under .wrapper

【讨论】：

是的，我认为人们想太多了

我也在走这条线。这是我正在创建的一个示例：jsfiddle.net/fdvfzoxz

【参考方案2】：

对于初学者，选择器 ul > ul 将不起作用，因为 ul 元素可能不是其他 ul 元素的直接子元素。在这种情况下，您需要使用 ul > li > ul。

您可以针对特定深度级别执行的操作是将所有内容根植到第一个 ul 元素的父级。例如，如果您的*** ul 是 body 元素的直接子元素，您可以简单地将 body > 添加到您的选择器中：

body > ul,                           /* Level 1 */
body > ul > li > ul,                 /* Level 2 */
body > ul > li > ul > li > ul      /* Level 3 */

尽管如此，只要具有正确的特异性，选择器 ul 就足以将样式应用于您的所有 ul 元素（如果您不想只针对特定的深度级别）。

不幸的是，不存在针对特定深度的独立选择器。不过，也许您以错误的方式处理此问题 - 为什么不向您希望设置样式的特定 ul 添加 class 或 id 属性并将它们用作选择器？