html - 添加 "invisible"或被 CSS 选择器规则跳过的 html 元素

Question

我想构建一个外部 GUI，它在带有关联 CSS 的通用 HTML 片段上运行。为了启用 GUI 的某些功能，我需要创建一些“元”HTML 元素来包含部分内容并将它们与数据相关联。

例子:

<div id="root">
    <foo:meta data-source="document:1111" data-xref="...">
        sometext
        <p class="quote">...</p>
    </foo:meta>
    <p class="other">...</p>
</div>

此 HTML 是从具有关联 CSS 的现有 HTML 开始自动生成的:

<div id="root">
    sometext
    <p class="quote">...</p>
    <p class="other">...</p>
</div>

#root>p {
    color:green;
}
#root>p+p {
    color:red;
}

问题是，在添加 <foo:meta> 时元素，这会破坏 CSS 子选择器和同级选择器。我正在寻找一种方法，让 CSS 选择器在以这种方式封装内容时继续工作。我们试过了foo\:meta{display:contents}样式，但是，尽管它的工作原理是从框渲染器中隐藏元元素，但它不会从选择器匹配器中隐藏它。我们不生成要处理的 HTML/CSS，因此在处理之前以某种方式编写它们不是一种选择。它们按原样出现，带有关联 CSS 的通用 HTML 文档。

有没有办法使用 HTML/CSS 实现我们正在寻找的东西？

重申一下，我们正在寻找一种方法，在不破坏子级和同级 CSS 选择器的情况下，将部分内容动态封装在非可视元素中。这些元素应该只对 DOM 遍历可用，例如 document.getElementsByTagName('foo:meta')

Answer 1

如果我正确理解了您的问题。我建议使用祖 parent 和 child 之间的空格而不是“>”。您的选择器也是一个 id 而不是一个类。您放入的选择器会选择下一级子级，即子级。但是在两者之间添加空格也可以让您选择孙子!所以你要做的是这个

#root .quote {
    color:green;
}

让我知道这是否有帮助。一个有效的 CSS 是 here