XML文档本身只包含结构化的数据内容，没有默认的展示样式，通过CSS可以为其添加渲染规则，实现文档内容的转换和可视化呈现，这种方式不需要依赖复杂的XSLT处理逻辑，适合轻量级的XML处理场景。
CSS转换XML的基本原理
XML文档的节点结构和HTML类似，都遵循DOM规范，CSS可以通过选择器匹配XML中的不同节点，为节点设置显示规则、排版样式，甚至通过display属性调整节点的渲染方式，从而实现类似文档转换的效果。需要注意的是，XML文档需要在头部声明关联的CSS样式表，浏览器才会自动应用对应的样式规则。
基础示例：转换简单XML文档
首先准备一个存储书籍信息的XML文档，内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="book.css"?>
<book_list>
<book>
<title>CSS实战手册</title>
<author>张三</author>
<price>59.9</price>
</book>
<book>
<title>XML基础教程</title>
<author>李四</author>
<price>49.9</price>
</book>
</book_list>
对应的book.css样式表内容如下，通过选择器匹配XML节点并设置转换规则：
/* 隐藏根节点本身，只显示子内容 */
book_list {
display: block;
padding: 20px;
font-family: "微软雅黑", sans-serif;
}
/* 每个书籍项设置为块级元素，添加边框和间距 */
book {
display: block;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
background-color: #f9f9f9;
}
/* 标题设置为加粗，字号加大 */
title {
display: block;
font-size: 18px;
font-weight: bold;
color: #333;
margin-bottom: 8px;
}
/* 作者和价格设置为行内块，添加间距 */
author, price {
display: inline-block;
margin-right: 20px;
color: #666;
font-size: 14px;
}
/* 价格前添加货币符号 */
price:before {
content: "￥";
}
将上述两个文件放在同一目录下，用浏览器打开XML文件，就可以看到XML数据被转换成了结构清晰的书籍列表样式，原本的XML标签不会直接显示，只会展示处理后的内容。
进阶示例：转换带属性的XML文档
如果XML节点包含属性，CSS也可以通过属性选择器匹配对应的节点，实现更灵活的转换效果。下面是一个存储员工信息的XML文档：
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="employee.css"?>
<employees>
<employee id="1001" department="技术部">
<name>王五</name>
<age>28</age>
</employee>
<employee id="1002" department="产品部">
<name>赵六</name>
<age>32</age>
</employee>
</employees>
对应的employee.css样式表如下：
/* 根节点设置为弹性布局 */
employees {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
/* 匹配所有employee节点，根据部门属性设置不同边框颜色 */
employee {
display: block;
width: 200px;
padding: 15px;
border-radius: 8px;
border: 2px solid #ccc;
}
/* 技术部员工边框设为蓝色 */
employee[department="技术部"] {
border-color: #1e88e5;
}
/* 产品部员工边框设为绿色 */
employee[department="产品部"] {
border-color: #43a047;
}
/* 姓名加粗显示 */
name {
display: block;
font-weight: bold;
font-size: 16px;
margin-bottom: 10px;
}
/* 年龄前面添加说明文字 */
age:before {
content: "年龄：";
color: #999;
}
age {
display: block;
font-size: 14px;
color: #666;
}
/* 在节点顶部显示员工ID和部门 */
employee:before {
content: "ID：" attr(id) " | 部门：" attr(department);
display: block;
font-size: 12px;
color: #888;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dashed #eee;
}
这个示例中，CSS不仅转换了XML的内容展示样式，还通过attr()函数读取了节点的属性值，结合属性选择器实现了不同节点的差异化渲染，转换效果更加丰富。
注意事项
- XML文档的样式表声明需要写在XML声明之后，否则可能无法正常加载CSS规则。
- 不同浏览器对XML+CSS的支持程度略有差异，部分CSS3高级特性可能在旧版本浏览器中无法生效。
- CSS转换XML只适合简单的展示和轻量转换场景，如果需要复杂的逻辑处理、节点增删改，还是建议使用XSLT或者后端语言处理。
- XML的标签名区分大小写，CSS选择器匹配时需要和XML中的标签名完全一致，否则无法生效。