如何给xml应用样式

引子：可扩展标记语言xml（Extensible Markup Language）自己平常也用到的不多，除了在ajax处理服务器返回的数据可能会用到外（不过一般用json处理数据的比较常见）还真没怎么了解过。其实我们常用的超文本标记语言HTML和XML可是有着挺大的联系，都是从标记语言发家，未来趋势HTML很有可能会被XML取代，XML优势就体现在可扩展，HTML它就固定是w3c定义的那些个标签，但是XML的标签很灵活随你起什么名字能够更精准的表现自己页面的信息。但XML也有它和HTML相比不灵活的地方，比如怎么应用样式。

正文：HTML应用样式有三种（内联，内嵌，外部引用），XML应用样式目前完全支持的应该只有外部引用（见w3c官方说明：https://www.w3.org/TR/CSS2/intro#q2 ）

  • 外部样式表：HTML有link元素链接外部样式表，有关link标签的详细说明及注意事项可参见我另篇博文（http://www.cnblogs.com/venoral/p/5202221.html），但是XML中link元素不会被当成引用外部样式的指令，XML提供了“xml-stylesheet”处理指令的方法来附加外部样式表。具体用法如下：
  • <?xml-stylesheet href="x.css" type="text/css" media="all" title="描述"?>

  1. 该处理指令必须放在文档第一个标签前面；

  2. type="text/css"可以省略，但最好还是不要省略这样能帮助浏览器识别该文件类型而决定在不支持的情况下是否下载它；
  3. media="all"可省略，用来设置样式表支持的媒介，属性值可以取all，screen，print等；
  4. title="描述"可省略，可以用来设置标题，不过xml不会出现多个首选样式表存在的情况下只会应用一个的情况它是全部应用的且层叠，不同于HTML的首选样式表。
  5. 1 <?xml version="1.0" encoding="UTF-8"?>
2 <?xml-stylesheet href="a.css" type="text/css"?>
3 <?xml-stylesheet href="b.css" type="text/css"?>
4 <test>
5   测试
6 </test>
  • 内嵌样式表：HTML有style标签，w3c只给出用“xml-stylesheet”的方式外部引用样式表。在http://www.shanghai.ws/w3c/Style/styling-XML.html#Embedded 看到用的是类似于锚点的用法实现的内嵌样式，不过经我测试浏览器对此支持不佳。以下测试chrome测试版本：46.0.2490.80 firefox测试版本：44.0.2 IE测试版本：11.0 
     1 <?xml-stylesheet href="#s1" type="text/css"?>
 2 <doc>
 3   <s id="s1">
 4     s { display: none }
 5     p { display: block ;
 6         color: red ;
 7         }
 8   </s>
 9   <p>Some text... </p>
10   <p class="note">A note... </p>
11 </doc>

    chrome对此完全不识别：

       

       firefox只识别了p元素，也就是除了带引用id s的之外的元素，而且会把s元素内容原样展示：

 　　

　　 IE对此完全不识别：

　　 

  • xml对元素选择器的支持这是毋庸置疑的，测试一下xml对id选择器，类选择器的支持：

　　id选择器：chrome，firefox正常，IE不支持

　　类选择器：chrome，IE不支持，firefox奇葩，居然支持。

　　属性选择器：想浏览器都支持怎么办，可以使用属性选择器“[ ]”获取元素，这样三大浏览器就全部支持了，属性选择器里xml支持~，*，^，$匹配：

1 <?xml-stylesheet href="a.css" type="text/css"?>
2 <doc>
3    <p class="test">Some text... </p>
4    <p>A note... </p>
5 </doc>
p[class="test"]{
  color: red;
}

　　后代选择器：支持   ， >，+，后代元素，直接子元素，直接兄弟元素。

　　伪类选择器：chrome，firefox支持 :hover，:first-child（省略伪类前面的限定元素，则表示在根元素下找第一个子元素，html一般是head元素），:lang()。IE支持:first-child，:lang()。

　　伪元素选择器：chrome，firedfox支持:before，:after。IE支持的前提是应用该伪元素的元素不能是id和类选择器，如#test:after就不行。

参考：http://www.shanghai.ws/w3c/Style/styling-XML.html

　　　http://www.ibm.com/developerworks/cn/xml/x-newxml/

粗略测试，如有误解，还望各位指正！感谢！

posted @ 2016-02-21 17:52  venoral  阅读(5173)  评论(1)  编辑  收藏  举报