如何使用css將圖像添加到xml表格

如何將位於本地機器上的小三角形圖像添加到該表格行的開頭位置？如何使用css將圖像添加到xml表格

繼承人我CSS

stock:nth-child(1){ 
    display:table-row; 
    content: url('..\stock\down.gif'); 
    color:red; 
}

和相應的XML

<stock class="down"> 
    <symbol>AAPL</symbol> 
    <company>Apple Computer, Inc.</company> 
    <lastSale>$15.26</lastSale> 
    <netChange>-0.17</netChange> 
    <pChange>-1.10%</pChange> 
    <volume>5.548</volume> 
    </stock>

這裏是一個多更好的方法來寫CSS

stock[class~=down]{ 
    border-bottom: 2px solid black; 
    display:block; 
    background: url("down.gif") no-repeat; 
    color:red;

}

來源

2015-08-25 Dallan Baker

你不妨查看xslt，這是xml特有的樣式語言。它允許css – nomistic

那麼你是說沒有辦法？我將在不久的將來學習xslt，但是這個項目應該只用css來完成。 –

這是可能的，但使用XSLT更容易。請參閱示例如何使用直接的XML和CSS來設計樣式 – nomistic

這是一個很容易做到這與XSLT，您可以在文件中的每個孩子運行一個foreach，並從電子表格應用樣式，但你可以用XML和CSS來做到這一點。你需要設置的標頭在XML文件中，然後調用樣式表，就像這樣：

<?xml version="1.0" encoding="UTF-8"?> 
<?xml-stylesheet type="text/css" href="stylesheet.css"?> 

    <stock class="down"> 
    <symbol>AAPL</symbol> 
    <company>Apple Computer, Inc.</company> 
    <lastSale>$15.26</lastSale> 
    <netChange>-0.17</netChange> 
    <pChange>-1.10%</pChange> 
    <volume>5.548</volume> 
    </stock>

然後你只需要修改你的CSS文件，讓你喜歡的任何變化。

例如：

（編輯圖像）：

stock { 
    display:block; 
    margin-left:20px; 
} 

symbol { 
    display: list-item; 
    list-style: url("..\stock\down.gif"); 

} 
company { 
    display: list-item; 
    list-style: url("..\stock\down.gif"); 
}

然後你可以改變這一點，你怎麼樣，以同樣的方式你會樣式HTML

來源

2015-08-26 20:35:06 nomistic

是的，我確實在我的xml中引用了css。這些只是我遇到的問題的剪輯。我有使用CSS表格的XML樣式。我想知道如何使用CSS添加圖像。我用的代碼是「content：url（'.. \ stock \ down.gif'）;」沒有工作來添加圖像。 –

@DallanBaker好吧我編輯它包含一個圖像（我測試了類似的東西，所以它應該工作） – nomistic

好吧我嘗試過使用它，它沒有工作。有沒有辦法在我的股票中做到這一點：第一個孩子（1）元素？那條線是如何正確指向我的本地機器上的圖像的？ –

如何使用css將圖像添加到xml表格

回答

相關問題