CSS样式为空却存在？ 揭秘.insertRule的秘密

哈喽！大家好，很高兴又见面了，我是golang学习网的一名作者，今天由我给大家带来一篇《CSS样式为空却存在？ 揭秘.insertRule的秘密》，本文主要会讲到等等知识点，希望大家一起学习进步，也欢迎大家关注、点赞、收藏、转发! 下面就一起来看看吧！

css样式为空，样式却存在的疑惑

本文旨在回答一个有关css样式的常见疑惑：当检查元素时发现内嵌的css样式为空时，样式却依然存在，这是如何实现的呢？

问题描述

以https://elements.envato.com/sign-in为例，在审查该网页时，你会发现一个内嵌的<style>标签：

<style data-styled="active" data-styled-version="6.1.12"></style>

然而，当查看该<style>标签的内部时，你会惊讶地发现它竟然为空：

<!-- -->

问题解答

这种现象可以通过使用.insertrule将规则插入到样式表中实现。当使用.insertrule时，相关<style>标签上的规则会应用于dom中的元素，但不会将html标记插入到<style>标签中。

在审查该站点时，可以通过选择样式标签，然后在控制台中执行以下命令来查看这一现象：

console.dir($0.sheet.cssRules)

你将看到规则被插入到样式表中，但<style>标签中却没有相应的html标记。

今天关于《CSS样式为空却存在？ 揭秘.insertRule的秘密》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！