本文讲解如何正确将 html 元素的内联 `style` 属性（如 `flex: 0.8`）提取为 css 类规则，重点纠正选择器写法、`
在实际开发中，为保持结构与样式的分离，应避免滥用内联样式（style="..."）。例如，原始代码：
<div class="icon red" style="flex: 0.8"></div>
其中 class="icon red" 表示该 <div> 同时拥有两个独立的 CSS 类：icon 和 red。若要将 flex: 0.8 移入 CSS，不能写成 .iconred（这会匹配一个名为 iconred 的单一类），而应使用 多类选择器 div.icon.red——它精确匹配同时具有 icon 和 red 两个类的 <div> 元素。
✅ 正确做法如下（CSS 规则需置于 <head> 中）：
<!DOCTYPE html>
<html>
<head>
<style>
div.icon.red {
flex: 0.8;
}
</style>
</head>
<body>
<div class="icon red"></div>
</body>
</html>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- <style> 标签必须放在 <head> 内；HTML5 已废弃 <style scoped>，禁止将其置于 <body> 或元素内部（如你示例中的 <div><style>...</style></div> 是无效且不被标准支持的）；
- 类选择器之间不加空格表示“同时拥有”，即 .icon.red 等价于 [class~="icon"][class~="red"]；若写成 .icon .red（中间有空格），则表示后代关系（.red 是 .icon 的子孙元素），语义完全不同；
- 若该样式仅用于此类组合，可考虑定义语义化新类名（如 .icon-red-flex），提升可维护性：
.icon-red-flex {
flex: 0.8;
}<div class="icon red icon-red-flex"></div>
总结：迁移内联样式的核心是——精准对应类名结构 + 合规放置样式表 + 避免作用域误用。遵循这些原则，才能确保样式可复用、易调试、符合现代前端工程规范。
