将内联样式转换为css规则

如果有办法将内联元素样式转换为css规则，我很感兴趣。我认为最困难的部分是生成所需的css选择器。也许这是不可能的，但可能有一个解决方案与js或php。谢谢你。

为例,

<div class="red" style="color: #red"></div>
<div style="color: #yellow"></div>
<div id="white" style="color: #white"></div>

将被转换，假设类和id为

<style>
    div{color: #yellow}
    .red{color: #red}
    #white{color: #white}
</style>
<div class="red"></div>
<div></div>
<div id="white"></div>

我需要这个为我的模板生成器，它喜欢的样式不是内联的，但在单独的文件或标签，所以原始的html代码块不会被改变，而编辑颜色，字体等。我想，我解释清楚，因为英语不是我的母语)