XML需通过CSS美化显示，须用<?xml-stylesheet?>声明CSS文件，用自定义标签名作选择器，支持属性选择器和部分伪类，但Chrome兼容性差，复杂场景建议XSLT转HTML或JS解析。
XML本身不带显示规则，要让它在浏览器里看起来整齐易读，得靠CSS来控制样式——这不是给XML加功能，而是让它“长得好看点”。关键在于：XML文档需声明关联的CSS文件，且浏览器支持有限（主要靠Firefox、Safari等现代浏览器渲染，Chrome对纯XML+CSS支持较弱，可能需配合HTML包装或XSLT过渡）。
1. 在XML文件中链接CSS
在XML文档的首行（必须在根元素之前）用<?xml-stylesheet?>处理指令引入CSS：
- <?xml version="1.0" encoding="UTF-8"?>
- <?xml-stylesheet type="text/css" href="style.css"?>
- <book><title>CSS入门</title><author>张三</author></book>
注意：href路径是相对于XML文件的位置；type固定写text/css；这条指令不能放在根元素内部，否则无效。
2. 用标签名直接写CSS选择器
XML没有预定义样式，CSS里直接用你的自定义标签名当选择器即可。比如XML中有<title>和<author>，CSS就写：
立即学习“前端免费学习笔记（深入）”；
- title { display: block; font-size: 1.4em; font-weight: bold; margin: 0.5em 0; }
- author { display: block; color: #555; font-style: italic; }
- book { margin-bottom: 1.5em; padding: 0.5em; border-left: 3px solid #007acc; }
所有标准CSS属性基本都可用（color、font、margin、display等），但float、position: fixed、flex布局等在部分浏览器中可能不生效，建议优先用block/inline-block + padding/margin排版。
3. 处理嵌套与属性样式
XML支持属性（如<item id="001" status="done">），CSS可通过属性选择器高亮状态：
- item[status="done"] { text-decoration: line-through; color: #666; }
- item[status="pending"] { color: #e74c3c; font-weight: bold; }
- 嵌套结构如<chapter><section><para>，可写chapter section para { margin-left: 1em; }
注意：属性值必须完全匹配（区分大小写），且不支持正则或部分匹配；伪类（:hover）在多数XML+CSS场景中可用，但:active/:focus通常无效。
4. 兼容性提醒与替代建议
纯XML+CSS适合简单展示（如配置文件、日志摘要、教学示例），但遇到复杂布局、交互或跨浏览器一致需求时，建议：
- 用XSLT转换为HTML再加CSS（最稳定通用）
- 把XML加载进JavaScript（fetch + DOMParser），用JS生成HTML结构并挂载样式
- 开发阶段用Firefox打开XML文件测试效果（它对XML+CSS支持最友好）
基本上就这些。不用想太复杂——把XML当“有语义的纯文本”，用CSS把它一行行、一块块地“摆整齐”，目的就达到了。
