内嵌 CSS 的空标签之谜：样式规则是如何应用的？

剖析神秘的内嵌 css：它的空缺如何实现？

在审查元素时，你可能会发现一些网页中的内嵌 css 样式似乎是空的，即 style 标签内部没有任何可见的样式规则。这引发了一个疑问：这些样式规则是如何应用到网页上的？

以 https://elements.envato.com/sign-in 为例，如果你查看带有 data-styled 属性的

幕后解析：.insertrule 的妙用

这种空样式标签的实现依赖于 element.insertrule 方法，该方法允许在样式表中动态插入样式规则。这使得样式引擎可以在不向标记中添加 html 的情况下，将规则应用于 dom 中的元素。

例如，在上述示例中，名为 document.emotioncache_6_2_0 的一个 javascript 对象使用 .insertrule 方法将样式规则动态插入到

探索内嵌 css

要查看这些动态插入的样式规则，可以打开浏览器的开发人员工具，选择带 data-styled 属性的

console.dir($0.sheet.cssRules)

这将显示应用于页面的所有样式规则列表，即使它们不在

以上就是内嵌 CSS 的空标签之谜：样式规则是如何应用的？的详细内容，更多请关注其它相关文章！