添加“隐藏”或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

如果我正确理解你的问题。我建议使用祖父母和孩子之间的空间而不是'>'。你的选择器也是一个id，而不是一个类。您放入的选择器选择作为子级的下一级子级。但是在两者之间添加空间也可以选择孙子孙女！所以你要做的就是这个

#root .quote {
    color:green;
}

如果这有帮助，请告诉我。一个工作的CSS是here

Answer 2

因此，经过大量的研究和研究，我们得出结论，即使使用ShadowDom也无法做到这一点，因为即使这样也需要大量的CSS重写，这可能无法保留语义。

然而，对于任何绊倒这个问题的人来说，我们采用以下方法来达到同样的目的（我只是简短，只有指针）：

• 使用两条注释来标记标记的开始/结束位置，而不是XML标记（例如，<!--<foo:bar data-source="1111">-->...content...<!--</foo:bar>-->）
• 这些指针或多或少类似于DOM Range的标记，它们可以与它一起工作。
• 这种方法具有有趣的优势（与单个节点相对），它可以在不同的节点中开始和结束，因此它可以跨越子树。
• 但是当您尝试重构它时，这也会破坏XML结构。通过操作也可以很容易地在范围开始之前结束范围结束，多个范围重叠等。
• 为了重新组合它（发送到下一个XML处理器或noSQL XML数据库进行交叉引用），我们需要确保避免上述的XML破坏操作;然后，只需要通过在文档（X）HTML（innerHtml，outerHtml，XMLSerializer）上使用字符串操作将封装标签转换为常规标签，以获得可以为内容挖掘和交叉引用的干净XML。
• 我们使用TreeWalker API进行评论的文档扫描，您可能需要它，尽管以这种方式扫描文档以进行评论可能很慢（虽然适用于我们）。如果你更大胆，你可以尝试使用xPath，即。 document.evaluate('//comment()',document)，似乎工作，但我们不相信所有浏览器遵守。