选择所有 X 类型的元素，但在其中再次选择不同类型的元素答案

【问题标题】：select all X type of elements but not the same type again inside them选择所有 X 类型的元素，但在其中再次选择不同类型的元素
【发布时间】：2011-06-18 23:35:44
【问题描述】：

例如，如果有多个 DIV 元素，则一个在另一个中。让我们说 3 个级别。
您将如何只选择第二级 Div，不知道它们可能有多深，
又不能上更多的课？

// html example of a possible DOM
<div class="level1'>
    <a>
        <div>
            <a>
                <div></div>
            </a>
        </div>
    </a>
    <a>
        <div></div>
    </a>
</div>

选择器概述：
div.level1 > div => (BAD) 不会返回任何内容，因为 Div 在 a 内

div.level1 > a > div => (BAD) 二级 div 可能更深，不应该写出确切的 xpath

是否有某种 CSS 选择器组合会返回 '找到元素但永远不会在其中找到'，那么div.level1 div 将只返回第二级 Div 而不是那些那可能在他们里面（那种东西）。我发现这是一个非常强大的东西。

【问题讨论】：

应该有这样的选择器。赋予巨大的权力。遗憾的是，CSS 缺少很多好的选择器

标签： css css-selectors

【解决方案1】：

不太可能。
但是您可以做的是在级别 >= 2 (div.level1 div) 上设置所需的属性，并在级别 2 (div.level1 div div) 以下的所有 div 上否定它。

当然，每个级别都可以选择使用不同的类。

【讨论】：

是的，但我喜欢尽量避免使用类，因为有时页面上的元素太多，给每个类分配一个类会增加页面的整体权重
@vsync 恕我直言，带宽是您最不应该担心的事情。这就像在一行中编写所有代码以节省空格。
是的，这就是我现在正在做的事情，我必须去重置我之前在 Ii DID 希望它捕获的元素上设置的所有属性。感谢您花时间发表您的想法。

【解决方案2】：

您的第一个选择器看起来非常好。只需查看此示例 CSS：

<style type="text/css">
    a, div {
        display: block;
        margin: 10px;
        border: 1px solid grey;
        background-color: red
    }
    div.level1 > div {
        background-color: green;
    }
</style>

仅匹配第二级 DIV，因为它是 div.level1 的直接子级。

顺便说一句：您的 HTML 完全没有意义。内联元素内的 DIV 很糟糕。但是链接内的链接更糟糕:)

【讨论】：

我在这方面犯了一个错误。不会从第一个选择器中选择任何内容，因为主 div 没有直接的 div 子级。我的 html 只是一个例子，我知道它是无效的。我真正的生活需要是边桌里的桌子。3 层深。太多的 TD 无法选择，而且会互相覆盖。
尝试 Nikita 的解决方案来选择所有 div，然后覆盖更深的。没有 CSS 选择器来选择子节点的级别。唯一的其他解决方案是使用 javaScript 完成这项工作。你可以例如使用 Prototypes down() (api.prototypejs.org/dom/Element/down) 函数来选择特定级别并向这些元素添加类名。但是你不能像你想要的那样单独使用 CSS 来做到这一点。
谢谢。我认为 CSS 委员会在对花哨的 CSS3 选择器发疯之前仍然需要处理基础知识。这种类型的选择器意义重大。
CSS 的设计使得很难想出这样的选择器，尤其是浏览器通常从右到左解析选择器，up 处理 DOM 树而不是向下，因为他们搜索要匹配的节点。