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

Question

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

Answer 1

因为应用的CSS取决于树中节点的位置（例如#foo＆gt; 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。这是一个随时可用的coffeescript，用于转储所有元素的计算样式：https://gist.github.com/AndrewO/1841191

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

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

希望这有帮助。