php - 如何使用 PHP 计算 DOM 节点的有效 CSS

Question

给定一个 HTML 和一个 CSS 文件，我如何计算哪些样式应用于节点？样式可以直接应用（例如#bar）或间接应用（例如#foo li）

Answer 1

因为应用的 CSS 取决于节点在树中的位置（例如，#foo > li 仅适用于带有 tagName li 的 #foo 的直接后代），因此您首先必须将 CSS 中的每个规则与 DOM 匹配，然后为每个节点计算生成的 CSS，记住每个选择器的权重。我不确定计算 CSS 权重的确切公式，但它类似于 number of #id selectors* 100 + number of .class selectors* 10 + number of tag selectors。当然，您必须注意内联样式和！重要的。

对于 CSS 到 DOM 节点的映射，您可以使用phpQuery或php-selector 之类的查询引擎。

我编写了概念验证脚本php-effective-css来说明第一步（将 CSS 映射到受每个规则影响的 DOM 节点）

Answer 2

您实际上可以只读取计算的样式，而不是计算它们。这很容易用 Javascript 完成。使用 PHP，您可以使用phantomJS。这是一个现成的咖啡脚本，用于转储所有元素的计算样式：https ://gist.github.com/AndrewO/1841191

还有一个用于在命令行上执行 phantomJS 的 PHP 包装器

https://github.com/jonnnnyw/php-phantomjs

希望这可以帮助。