CSS 选择最多 N 层的嵌套元素

2024-01-06

我有许多嵌套元素,并且我尝试仅选择前 N 层。下面显示了一个工作示例,其中我选择了前 7 个级别并设置了它们的样式。这正是我想要的,但是,我希望有一种选择这些元素的简化方法。

在我的实际用例中,我不知道嵌套元素的总数,并且我试图选择前 50 个级别,因此使用上述方法会非常混乱。不幸的是,我无法更改应用程序中的 HTML,因此它只能是 CSS 方法。谢谢。

.container > div,
.container > div > div,
.container > div > div > div,
.container > div > div > div > div,
.container > div > div > div > div > div,
.container > div > div > div > div > div > div,
.container > div > div > div > div > div > div > div {
  border-left: 1px solid;
  padding-left: 15px;
}
<div class="container">
  <div>
    A
    <div>
      B
      <div>
        C
        <div>
          D
          <div>
            E
            <div>
              F
              <div>
                G
                <div>
                  H
                  <div>
                    I
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

据我所知,这在目前的所有 CSS 版本中都是不可能的Descendant Level Selector选择所有元素达到指定级别的功能不打算很快实现。


您可以做的是为您想要选择和使用的所有元素设置一个类:

.container .class {
    border-left: 1px solid;
    padding-left: 15px;  
 }

如果您无法对 HTML 进行任何更改或使用 JavaScript,那么您当前所拥有的就是您最好的选择。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS 选择最多 N 层的嵌套元素 的相关文章

  • 如何使用div绘制曲线?

    我需要使用 CSS 绘制两条曲线 我尝试过组装一些divs 使用CSSborder radius绘制弧形面板 但结果很糟糕 还有更好的算术吗 正如我之前在评论中提到的 请不要使用CSS用于实现复杂的曲线和形状 虽然仍然可以使用 CSS 来实
  • 在响应模式下使用 CSS 更改元素顺序

    图1为桌面模式 下面两张图片和文字 总共三个div 图 2 是我希望它在移动浏览器 例如手机 中的显示方式 关于如何实现这一点有什么想法吗 我愿意接受任何建议 这个想法是让文本显示在图像上方 以最好地说明这两个图像的描述 在桌面版本中将文本
  • 这个 CSS 选择器是什么? [类* =“跨度”]

    我在 Twitter Bootstrap 中看到了这个选择器 show grid class span background color eee text align center border radius 3px min height
  • 交替 div 使图像向左(偶数)或向右(奇数)

    我正在尝试更好地排列图像 而不仅仅是一列中的图像 请参阅附件中的示例 每篇文章的图像可以位于左侧和右侧 这是我的代码 HTML section class content list page section
  • CSS:多属性选择器

    我想设置 电子邮件 和 密码 类型的表单输入样式 但不设置其他任何样式 我正在想象类似以下的事情 input type email type password 然而 属性选择器的工作方式似乎将其解释为 输入 其中类型同时是 电子邮件 and
  • iFrame 未扩展至 100% 高度

    我有这个下面的html 我希望 iFrame 能够 100 覆盖屏幕的其余部分 我在高度属性中尝试了 100 和 但不起作用 这是为什么 谢谢 div img height 35 width 84 alt Kucku src Content
  • 相对于变换元素的绝对定位元素位置

    我重新创建了我在模板中遇到的问题 有一个nav具有position relative 在 的里面nav有一个div有两个嵌套列表 其中一个列表的位置绝对固定在列表的底部nav 当div对其应用了变换 当 的时候div在绝对和相对定位的元素之
  • 显示带有背景颜色的百分比条

    例如 如果我有一个包含两列和 2 行的表 Col1 Percentage 50 50 70 70 如何用代表 COl1 值的颜色填充百分比列 像这样的东西 您可以使用具有两个紧接着的停止点的线性渐变 percentageFill heigh
  • React Native 上的文本缩进

    我需要缩进 React Native 段落的第一行 但使用常见的csstext indent财产 textIndent 与 React Native 不兼容 伪元素选择器也不兼容 例如 first line 有什么方法可以做到这一点而不用将
  • 有没有办法在 html 图像标签中显示位图数据? [复制]

    这个问题在这里已经有答案了 有没有办法在 HTML 元素中显示位图图像数据 例如 您有一个指向源文件的常规图像 如下所示 img src myImage png width 100 height 100 有没有这样的事情 img width
  • 由于固定导航,增加了 FancyBox v2 的顶部和底部边距

    我目前正在开发一个网站 该网站将来将具有响应能力 该网站主要由图像组成 单击这些图像会加载到 FancyBox 中 FancyBox v2 现在具有响应能力 因此可以在屏幕尺寸发生变化时重新调整图像等的大小 作为我设计的一部分 我有两个固定
  • 如何更改 Shiny 中 navbarPage 折叠的断点

    我想用shiny navbarPage collapsible TRUE 当在小屏幕上查看我的 Shiny 应用程序时 将导航元素折叠到菜单中 默认情况下 当浏览器宽度小于 940 像素时会触发折叠 有什么方法可以改变这一点 以便在稍大的浏
  • 由于 MIME 类型不受支持,拒绝应用样式

    我不断收到一条错误消息 指出 MIME 类型 text html 不可执行或不是受支持的样式表 MIME 类型 并且启用了严格的 MIME 检查 我的链接代码是
  • 在 IE 8 及以下版本中动态添加 @font-face 规则

    我使用 IE stylesheet addRule 方法添加 font face 规则 但是 符号对于该方法的 选择器 参数来说是不允许的字符 因此我收到 无效参数 错误 s addrule font face font family Fo
  • 从 Bootstrap 中删除字形

    如何从 bootstrap 3 中删除所有字形实例 看起来它已经大量嵌入到 css 文件中了 我正在努力使文件大小尽可能最小 只需简单地克隆引导程序https github com twbs bootstrap sass https git
  • 如何动态打破 FlexBox 列以开始新列

    I have a dynamic list of items containing text placed column wise which I need to break after every 5th item 我只有两个限制 每个
  • 垂直对齐复选框标签? [复制]

    这个问题在这里已经有答案了 我有这样的复选框
  • 如何将背景图像仅应用于一个反应页面而不是整个应用程序?

    注册页面示例 register background image linear gradient to right ff5722 0 ff9800 100 margin top 150px important div div div div
  • 如何在没有@import的情况下减少@import?

    我用的较少 从 Google PageSpeed 我了解到 使用 importCSS 文件中的内容会影响网站速度 所以我想排除任何 import来自我的 CSS 的东西 我有 2 个不同的样式表reset css and rebuild c
  • 为什么元素上的负底部边距会降低该元素父元素的高度?

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch

随机推荐

  • 如何创建 package.json 文件?

    In Mac Terminal https en wikipedia org wiki Terminal macOS Terminal package json This is most likely not a problem with
  • 在 props 中传递 Redux store

    我正在大学练习使用 React 和 Redux 构建应用程序 当我使用 Yarn 启动服务器时 出现以下错误 Passing redux store in props has been removed and does not do any
  • Autofac 和 BeginLifetimeScope 的内存泄漏 / DbContext 已被处置 / C# asp.net

    我正在使用 NServiceBus Scheduler 这就是为什么我被迫使用 BeginLifetimeScope 来避免内存泄漏 Method public void Start using var scope lifetimeScop
  • 使用 Tweepy 自动直接消息响应

    我目前正在使用 python 中的 tweepy 包作为 DM 侦听器 我希望在收到发件人的消息后回复他们 我有以下内容 class StdOutListener StreamListener def init self self twee
  • 如何写入 7z 存档格式的二进制数据?

    我一直在研究 7z 存档格式的格式描述和源代码 但在编写有效的容器时仍然遇到困难 我想我可以创建一个空容器 无论如何 这是我的开始 std ofstream ofs archivename c str std ios binary std
  • 批处理文件编辑 ini 文件中的行

    我有一个自动生成的 ini 文件 它的第二行始终是 Version W XX Y ZZ Where W是主版本号 XX是次要版本 Y是构建和ZZ是修订版 我需要打开该 ini 文件并使用批处理文件编辑该行 以便删除该版本中的内部版本号和修订
  • 使用 C++ 在 Linux 中创建计时器队列 [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我在 Windows 中使用 C 实现了一个项目 该项目创建一个计时器队列 向其中添加条目 在计时器到期时执行回调函数 等待下一个计时
  • 如何使用Java日历从日期中减去X天?

    有人知道使用Java日历从日期中减去X天的简单方法吗 我还没有找到任何函数可以让我直接从 Java 中的日期减去 X 天 有人能指出我正确的方向吗 取自这里的文档 http docs oracle com javase 7 docs api
  • 获得 Android 用户消息平台的同意

    我正在尝试使用 Admob 实现 UE 同意 让用户选择是否想要在 Android 中显示个性化广告 我正在通过用户消息平台的 资金选择 来做到这一点 我遵循了这个快速入门指南 https developers google com adm
  • Sphinx实时索引配置?

    我是 Sphinx 的新手 我需要 Linux 服务器中实时索引 sphinx config 的示例代码 对于近实时索引 您可以使用增量方法 http sphinxsearch com docs 1 10 delta updates htm
  • C 标准库中包含哪些内容?

    我将举一个例子GNU C 库 http www gnu org software libc manual html mono libc html Opening and Closing Files文档 13 1 打开和关闭文件 本节描述打开
  • 当你有 std::string 时如何使用 basic_istream

    我有一个使用 basic istream 作为参数的函数 并且我有一个 std string 其中包含我需要传递它的数据 我怎么做 您可以将字符串数据放入流中 std string x std stringstream ss x put s
  • 比较器 - int 不能取消引用[重复]

    这个问题在这里已经有答案了 我在这里看到了如何使用 Comparator 接口对 ArrayList 进行排序的示例 所以我尝试了一下 对于字符串 它工作得很好 但是对于我想要排序的一个变量是整数 它不会编译 说 int 不能取消引用 我该
  • 如何让屏幕暂停? [复制]

    这个问题在这里已经有答案了 可能的重复 如何阻止 C 控制台应用程序立即退出 https stackoverflow com questions 2529617 how to stop c console application from
  • 在 C++ 中使用 OpenCV 2.4 计算凸面缺陷

    我正在使用 OpenCV 2 4 来计算图像的凸包 我还进行了一些处理以消除图像中的一些噪声 这与问题并不真正相关 计算凸包的代码如下 cv Mat sourceImage assume something is already here
  • 如何将HTML文件转换为word? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我需要将 HTML 文档作为 Word DOC 文件保存在内存中 有人可以给我一些可以用来执行此操作的
  • JFreeChart 中的 LogAxis 上未显示小刻度

    我在用着JFreeChart绘制一些数据并使用LogAxis对于范围轴 我很困惑为什么我似乎无法在轴上显示小刻度 但网格线显示得很好 如果我不使用LogAxis我可以使用以下命令打开和关闭小刻度setMinorTickMarksVisibl
  • 具有拖放功能的示例任务应用程序

    app js App Em Application create App IndexRoute Em Route extend model function return newTasks Em A id 1 name Task 1 id
  • 这是 JavaScript 中的一个简单的去抖动函数吗?

    var debounce function fn delay var timeoutId return function debounced if timeoutId clearTimeout timeoutId timeoutId set
  • CSS 选择最多 N 层的嵌套元素

    我有许多嵌套元素 并且我尝试仅选择前 N 层 下面显示了一个工作示例 其中我选择了前 7 个级别并设置了它们的样式 这正是我想要的 但是 我希望有一种选择这些元素的简化方法 在我的实际用例中 我不知道嵌套元素的总数 并且我试图选择前 50