我想构建一个外部 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')
最佳答案
如果我正确理解了您的问题。我建议使用祖 parent 和 child 之间的空格而不是“>”。您的选择器也是一个 id 而不是一个类。 您放入的选择器会选择下一级子级,即子级。但是在两者之间添加空格也可以让您选择孙子! 所以你要做的是这个
#root .quote {
color:green;
}
让我知道这是否有帮助。 一个有效的 CSS 是 here
关于html - 添加 "invisible"或被 CSS 选择器规则跳过的 html 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54749463/