剖析神秘的内嵌 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 的空标签之谜：样式规则是如何应用的？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
435
收藏
