如何給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. <?xml version="1.0" encoding="UTF-8"?>
   <?xml-stylesheet href="a.css" type="text/css"?>
   <?xml-stylesheet href="b.css" type="text/css"?>
   <test>
     測試
   </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

  <?xml-stylesheet href="#s1" type="text/css"?>
  <doc>
    <s id="s1">
      s { display: none }
      p { display: block ;
          color: red ;
          }
    </s>
    <p>Some text... </p>
    <p class="note">A note... </p>
  </doc>

  chrome對此完全不識別：

       

       firefox只識別了p元素，也就是除了帶引用id s的之外的元素，而且會把s元素內容原樣展示：

 　　

　　 IE對此完全不識別：

　　 

• xml對元素選擇器的支持這是毋庸置疑的，測試一下xml對id選擇器，類選擇器的支持：

　　id選擇器：chrome，firefox正常，IE不支持

　　類選擇器：chrome，IE不支持，firefox奇葩，居然支持。

　　屬性選擇器：想瀏覽器都支持怎么辦，可以使用屬性選擇器“[ ]”獲取元素，這樣三大瀏覽器就全部支持了，屬性選擇器里xml支持~，*，^，$匹配：

<?xml-stylesheet href="a.css" type="text/css"?>
<doc>
   <p class="test">Some text... </p>
   <p>A note... </p>
</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/

粗略測試，如有誤解，還望各位指正！感謝！