如何验证HTML中的内联CSS是否符合CSS 2.1或3版本规范

内联CSS的规范要求其实和外部/内部CSS完全一致，只是写法嵌入在HTML的style属性里。针对你的需求，这里有几个可行的方案：

• 手动提取+使用现有W3C验证工具
  这是最直接的方式：把目标元素style属性里的内容单独提取出来（比如从你的示例里取出max-width:620px;background-color:#002e6e），然后粘贴到你找到的W3C验证工具里。记得在工具的选项里选择你要验证的CSS版本（CSS 2.1或3），就能得到准确的规范检查结果。适合少量内联样式的场景。

• 利用浏览器开发者工具实时检查
  现代浏览器的DevTools是个免费又好用的工具：

  1. 打开DevTools（F12或右键“检查”），在Elements面板选中带有内联样式的元素；
  2. 切换到Styles标签，找到内联样式块；
  3. 如果某个属性不符合你目标的CSS版本规范，浏览器会用红色下划线标注，hover上去还能看到具体的兼容性提示。你也可以在DevTools的设置里开启“显示无效属性”的选项，让问题更醒目。

• 批量处理：用脚本提取并验证
  如果你有大量内联样式需要验证，可以写个简单的脚本自动化处理：

  1. 用JavaScript遍历HTML中的所有元素，提取每个元素的style属性内容；
  2. 把这些样式内容拼接成完整的CSS规则（比如给每个内联样式加个临时选择器，像.temp-inline { [内联样式内容] }）；
  3. 把拼接好的CSS内容放到验证工具里，或者用Node.js的css-validator这类库来批量验证，效率更高。

另外要注意：内联CSS里的写法要符合CSS声明的语法（比如属性名和值的正确格式、分号分隔等），和外部CSS的语法要求完全一致，所以只要验证提取后的CSS声明即可。

内容的提问来源于stack exchange，提问作者Probosckie