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

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《内嵌 CSS 的空标签之谜：样式规则是如何应用的？》，聊聊，希望可以帮助到正在努力赚钱的你。

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

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

以 https://elements.envato.com/sign-in 为例，如果你查看带有 data-styled 属性的 <style> 标记，你会发现它内部没有任何内容。然而，页面上的元素确实应用了相关的样式。

幕后解析：.insertrule 的妙用

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

例如，在上述示例中，名为 document.emotioncache_6_2_0 的一个 javascript 对象使用 .insertrule 方法将样式规则动态插入到 <style> 标记中。这种方法避免了将样式标记写入 html dom，同时仍能确保样式应用于目标元素。

探索内嵌 css

要查看这些动态插入的样式规则，可以打开浏览器的开发人员工具，选择带 data-styled 属性的 <style> 标签，并在控制台执行以下命令：

console.dir($0.sheet.cssRules)

这将显示应用于页面的所有样式规则列表，即使它们不在 <style> 标记中。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《内嵌 CSS 的空标签之谜：样式规则是如何应用的？》文章吧，也可关注golang学习网公众号了解相关技术文章。