8

当我检查一个元素时，Chrome 会在“匹配的 CSS 规则”::after窗格中向我显示和::before定义（以及继承的定义等） 。但Computed Styles窗格仅显示根元素的计算样式。

我有一个完整的 CSS 类层次结构用于伪元素的一些属性继承和一些覆盖等，并且想知道是否有任何方法可以看到实际应用的样式集（即计算样式窗格显示的内容）根元素）

如果有人能对此有所了解，那将非常有帮助。

编辑 - 2014 年 2 月 13 日

最近版本的 Chrome 确实内置了这个功能 也许这个小线程与他们有关，包括它？:-)

4

2 回答 2

3

window.getComputedStyle( element[, pseudoElt] )

pseudoElt选修的

指定要匹配的伪元素的字符串。对于常规元素，必须省略（或为空）。伪类可以像 ":focus" 那样指定。

我可能误解了您要完成的工作，但这里有一些 JavaScript 可以使用。我希望它有用。

它遍历文档中的每个元素并尝试获取content其:befores 和:afters。
如果找到，它将详细信息输出到console.
简单，但可以证明。

document.querySelectorAll( "*" ).forEach( ( e ) => {
  const ebc = window.getComputedStyle( e, ":before" ).content,
        eac = window.getComputedStyle( e, ":after" ).content;
  if ( ebc || eac ) {
    console.log( e );
    console.log( ( ebc ? "Before content = " + ebc : "No :before content" ) );
    console.log( ( eac ? "After content = " + eac : "No :after content" ) );
  }
} );
div:before {
  content: "This is a test.";
}
p:after {
  content: attr( data-content );
}
span:after {
  content: " dolor";
}
<div>
  <p data-content="&hellip;">Lorem <span>ipsum</span></p>
</div>

于 2012-12-20T10:43:28.820 回答
1

是的，虽然不是那么明显。如果您使用的是 Firebug，您需要确保在样式下拉选项卡上选择了“仅显示应用的样式”。然后正如您从下面的屏幕截图中看到的那样，您应该能够选择伪元素并查看它们的计算样式（或应用的样式），其中考虑了任何覆盖等。

计算样式

于 2012-12-17T15:58:13.277 回答