CSS和处理指令

njthzxwz  于 2023-04-13  发布在  其他
关注(0)|答案(2)|浏览(93)

我有一个包含处理指令的HTML文档,应该使用CSS进行样式化。我没有找到任何方法来引用CSS中的处理指令。这可能吗?

<div>
  Hello World
  <?pi1 ?>
  Test
  <?pi2 ?>
</div>
s2j5cfk0

s2j5cfk01#

不可以。浏览器会把它们当作虚假的注解,所以在DOM中它们是 comment 节点。CSS选择器匹配 element 节点,所以处理指令是不可引用的。

dy1byipe

dy1byipe2#

other answer正确地指出解析HTML永远不会生成处理指令节点。(截至2023年4月)由HTML LS §13.2.5.6。然而,这样的节点仍然可以在运行时动态地构造并插入到DOM树中。使用createProcessingInstructionappendChildinsertBefore。它们甚至会出现在父节点的.innerHTML中,即使它们不会通过HTML解析无损地往返。它们在XML DOM中仍然完全支持。
也就是说,处理指令节点,如注解节点,即使动态插入也不会参与样式化。因此,即使在querySelectorAll中也没有CSS选择器可以选择它们。处理指令节点可以通过XPath表达式来选择,但是,evaluatecreateExpression支持:

const xpath = function* (expr, node = document) {
    const result = document.evaluate(expr, node);

    for (;;) {
        const item = result.iterateNext();
        if (item === null)
            break;
        yield item;
    }
};

document.body.appendChild(
    document.createProcessingInstruction('foo', '123'));
document.body.appendChild(
    document.createProcessingInstruction('bar', '456'));
document.body.appendChild(
    document.createProcessingInstruction('quux', '789'));
document.body.appendChild(
    document.createProcessingInstruction('bar', '31337'));

for (const piNode of xpath('.//processing-instruction("bar")')) {
    console.log(`PI node: target=${piNode.target} data=${piNode.data}`);
}

相关问题