html - 如何将 css 应用于特定的 xml/xsl 元素？

Question

我想对我的成分应用一些 css 修改(创建一个列表)，我不知道如何用他的子元素(数量，过程)调用每一种成分。

这是我的 html:

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

<recipes
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:noNamespaceSchemaLocation="recipe.xsd">
    <recipe id= "1">
        <name>Gooseberry crème brulée tart</name>
        <author>Barney Desmazery</author>
        <Magazine_subscription>5 issues for £5</Magazine_subscription>
        <preparation_time>Preparation Time: 10 mins</preparation_time>
        <cooking_time>Cooking Time: 80 mins</cooking_time>
            <additional_time></additional_time>
        <serves>Serves: 8</serves>
        <level>Difficulty: Moderately easy</level>
        <overview>Overview: Seasonal berries and sweet pastry make a stunning dessert for a dinner party - blowtorch for a beautifully crisp cracked sugar topping</overview>
        <nutrition>
            <kcalories>467</kcalories>
            <fat>21g</fat>
                <saturates>11g</saturates>
            <carbs>60g</carbs>
                <sugars>39g</sugars>
            <fibre>3g</fibre>
            <protein>7g</protein>
            <salt>0.4g</salt>
        </nutrition>    
            <ingredients>
                <ingredient>Gooseberries</ingredient>
                    <quantity>450g</quantity>
                    <process/>
                <ingredient>White caster sugar</ingredient>
                    <quantity>200g</quantity>
                    <process/>
                <ingredient>Eggs</ingredient>
                    <quantity>4</quantity>
                    <process/>
                <ingredient>Double cream</ingredient>
                    <quantity>100ml</quantity>
                    <process/>
                <ingredient>Block sweet pastry</ingredient>
                    <quantity>500g</quantity>
                    <process/>
                <ingredient>Flour</ingredient>
                    <quantity>for dusting</quantity>
                    <process/>
            </ingredients>
            <method>
                <step>Tip the gooseberries into a saucepan with 100g of the sugar and 100ml water. Simmer for 8-10 mins until the fruit is soft and the juices are syrupy. Tip the fruit into a sieve set over a jug and leave to strain – you will need about 150ml of the syrupy juices. Tip the pulp into a bowl and leave to cool.</step>
                <step>In a separate bowl, beat the eggs with 50g of the sugar, then beat in the cream and gooseberry syrup. Strain through a sieve into another jug and set aside.</step>
                <step>Heat oven to 160C/140C fan/gas 3. Roll out the pastry on a lightly floured surface to the thickness of a £1 coin, then lift into a 23cm tart tin. Press down gently on the bottom and sides, leaving a slight overhang. Line the tart with foil and fill with baking beans. Bake for 10 mins, then discard the foil and beans, and bake for another 20 mins. Remove from the oven and leave to cool.</step>
                <step>Reduce oven to 150C/130C fan/gas 2. Spread the pulp evenly over the base of the tart, then carefully pour the cream mixture over it to create 2 layers. Bake for 35-40 mins until the cream layer has the slightest wobble to it</step>   
            </method>       
    </recipe>
    <recipe id= "2">
        <name>Roast sirloin of beef</name>
        <author>Gary Rhodes</author>
        <Magazine_subscription>5 issues for £5</Magazine_subscription>
        <preparation_time>Preparation Time: 10 mins</preparation_time>
        <cooking_time>Cooking Time: 150 mins</cooking_time>
            <additional_time>Resting time</additional_time>
        <serves>Serves: 6</serves>
        <level>Difficulty: Easy</level>
        <overview>Overview: Gary Rhodes' delicious, succulent roast beef dish is perfect for Boxing Day lunch or an alternative Christmas Day roast. Just four ingredients</overview>
        <nutrition>
            <kcalories>331</kcalories>
            <fat>19g</fat>
                <saturates>8g</saturates>
            <carbs>1g</carbs>
                <sugars>0g</sugars>
            <fibre>0g</fibre>
            <protein>36g</protein>
            <salt>1.47g</salt>
        </nutrition>    
            <ingredients>
                <ingredient>Vegetable oil or beef fat</ingredient>
                    <quantity>2tbsp</quantity>
                    <process/>
                <ingredient>Sirlon of beef joint</ingredient>
                    <quantity>1-1 1/2kg/2lb 4-3lb 5oz</quantity>
                    <process/>
                <ingredient>Red wine</ingredient>
                    <quantity>1 glass</quantity>
                    <process/>
                <ingredient>Can beef consommé</ingredient>
                    <quantity>400g</quantity>
                    <process/>                  
            </ingredients>
            <method>
                <step>Heat oven to 200C/fan 180C/gas 6. Heat the oil or fat in a large fl ameproof roasting tin in the oven for 5-10 mins. Season the beef all over.</step>
                <step>Place the joint fat-side down in the roasting tin and put it on the hob. Sizzle to release some of the fat, then turn the beef in the fat to seal and colour it all over, about 5 mins. The joint can now be roasted, fat-side up, allowing 10-15 mins per 450g for medium-rare, 15-20 mins per 450g for medium, 20-25 mins for medium-well and 25-30 mins for well done. Turn the joint halfway through its cooking time for an even roast. Once roasted, remove the beef from the pan and leave to one side, loosely covered with foil, to rest for 15-20 mins</step>
                <step>Meanwhile, pour off any excess fat from the roasting tin, then put the tin on a medium heat on top of the stove. Once it begins to sizzle, pour in the red wine, allowing it to boil rapidly until almost completely evaporated. Tip in the consommé and allow to simmer for 4-5 mins. This will give a light sauce, rather than a gravy (see tip, below). Simmer for a few more mins before straining through a sieve for the smoothest of fi nishes. Carve the beef into thick slices, offering the gravy separately.</step>    
            </method>           
    </recipe>
    <recipe id= "3">
        <name>Haddock &amp; leek au gratin with sweetcorn mash</name>
        <author>Sara Buenfeld</author>
        <Magazine_subscription>5 issues for £5</Magazine_subscription>
        <preparation_time>Preparation Time: 10 mins</preparation_time>
        <cooking_time>Cooking Time: 50 mins</cooking_time>
            <additional_time></additional_time>
        <serves>Serves: 2</serves>
        <level>Difficulty: Easy</level>
        <overview>Overview: Leek and spinach are layered up with white fish fillets and cheese sauce then topped with golden mash in this delicious, low-fat oven bake.</overview>
        <nutrition>
            <kcalories>618</kcalories>
            <fat>13g</fat>
                <saturates>6g</saturates>
            <carbs>70g</carbs>
                <sugars>20g</sugars>
            <fibre>11g</fibre>
            <protein>50g</protein>
            <salt>2.1g</salt>
        </nutrition>    
            <ingredients>
                <ingredient>Potatoes</ingredient>
                    <quantity>350g</quantity>
                    <process>quartered</process>
                <ingredient>Can sweetcorn in water</ingredient>
                    <quantity>195g</quantity>
                    <process/>
                <ingredient>Bag ready-washed spinach</ingredient>
                    <quantity>240g</quantity>
                    <process/>
                <ingredient>Leaks</ingredient>
                    <quantity>2</quantity>
                    <process>Thickly sliced</process>
                <ingredient>Skimmed milk</ingredient>
                    <quantity>plus 3 tbsp</quantity>
                    <process/>
                <ingredient>Unsalted butter</ingredient>
                    <quantity>15g</quantity>
                    <process/>
                <ingredient>Plain flour</ingredient>
                    <quantity>15g</quantity>
                    <process/>
                <ingredient>English mustard</ingredient>
                    <quantity>1/2 tsp</quantity>
                    <process/>
                <ingredient>Mature reduced-fat cheese</ingredient>
                    <quantity>75g</quantity>
                    <process>grated</process>
                <ingredient>Fillets of skinless haddock</ingredient>
                    <quantity>2 x 125g</quantity>
                    <process/>                                          
            </ingredients>
            <method>
                <step>Heat oven to 200C/180 fan/gas 6. Boil the potatoes for 15-20 mins until tender, then drain. Reserve 3 tbsp corn and blitz the rest (with its juice) using a hand blender or a food processor until completely smooth, then mash into the potatoes. Cook the spinach following pack instructions – if you have a microwave, choose this method.</step>
                <step>Put the leeks in a pan with the 300ml milk and the butter. Cook gently, part-covered, for 8 mins until the leeks are tender. (Keep an eye on things as milk can easily boil over.) Mix the 3 tbsp milk with the flour and mustard, then stir into the leek mixture – keep stirring until thickened. Take off the heat and stir in three-quarters of the cheese.</step>
                <step>Squeeze as much liquid as you can from the spinach, then arrange on the base of 2 gratin dishes. Place a fish fillet on top of each, then spoon over the leek &amp; cheese sauce. Top with the sweetcorn mash. Mix the remaining corn and cheese, and scatter on top. Place the dishes on a baking tray and cook for 25 mins until the fish flakes when tested and the top is golden.</step>  
            </method>           
    </recipe>
    <recipe id= "4">
        <name>Cheesy mushroom omelette</name>
        <author>Good Food</author>
        <Magazine_subscription>5 issues for £5</Magazine_subscription>
        <preparation_time>Preparation Time: 5 mins</preparation_time>
        <cooking_time>Cooking Time: 10 mins</cooking_time>
            <additional_time></additional_time>
        <serves>1</serves>
        <level>Difficulty: Easy</level>
        <overview>Overview: Whip up a tasty omelette with this recipe</overview>
        <nutrition>
            <kcalories>391</kcalories>
            <fat>33g</fat>
                <saturates>10g</saturates>
            <carbs>0.3g</carbs>
                <sugars>0.2g</sugars>
            <fibre>0.7g</fibre>
            <protein>22g</protein>
            <salt>0.9g</salt>
        </nutrition>    
            <ingredients>
                <ingredient>Olive oil</ingredient>
                    <quantity>1tbsp</quantity>
                    <process/>
                <ingredient>Handful button or chestnut mushrooms</ingredient>
                    <quantity/>
                    <process></process>
                <ingredient>Vegetarian cheddar,grated</ingredient>
                    <quantity>25g</quantity>
                    <process/>
                <ingredient>Small handfull parsley leaves</ingredient>
                    <quantity></quantity>
                    <process>Roughly chopped</process>
                <ingredient>Eggs</ingredient>
                    <quantity>2</quantity>
                    <process>beaten</process>                                       
            </ingredients>
            <method>
                <step>Heat the olive oil in a small non-stick frying pan. Tip in the mushrooms and fry over a high heat, stirring occasionally for 2-3 mins until golden. Lift out of the pan into a bowl and mix with the cheese and parsley.</step>
                <step>Place the pan back on the heat and swirl the eggs into it. Cook for 1 min or until set to your liking, swirling with a fork now and again.</step>
                <step>Spoon the mushroom mix over one half of the omelette. Using a spatula or palette knife, flip the omelette over to cover the mushrooms. Cook for a few moments more, lift onto a plate and serve with oven chips and salad.</step> 
            </method>           
    </recipe>                                                                               
</recipes>

这是我的 Xsl:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="recipes/recipe">
    <html>
        <head>
            <title>Recipes</title>
            <meta charset="utf-8" />
            <link rel="stylesheet" href="recipes.css" />
        </head>
        <body>
            <h1><xsl:value-of select="name"/></h1>
                <tr>
                    <xsl:value-of select="preparation_time"/><br/>
                    <br/>
                    <xsl:value-of select="cooking_time"/><br/>
                    <br/>
                    <xsl:value-of select="serves"/><br/>
                    <br/>
                    <xsl:value-of select="level"/><br/>
                    <br/>
                    <xsl:value-of select="overview"/><br/>
                    <br/>
                    <td><xsl:value-of select="ingredients"/></td>
                 </tr>                   
        </body>
    </html>
</xsl:template>    
</xsl:stylesheet>

有什么想法吗？

非常感谢。

Answer 1

目前，您没有输出结构良好的 HTML，因为您正在创建 tr不在 table 中的元素标记，然后不创建 td此 tr 中的标签元素。

但是在回答你的问题时，列出成分，而不是做 <xsl:value-of select="ingredients"/>这将输出 ingredients 下的所有文本元素，你应该使用 xsl:for-each

 <xsl:for-each select="ingredients/ingredient">

然后，你会像这样输出成分名称

<xsl:value-of select="." />

在哪里.代表当前ingredient节点

试试这个 XSLT

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" doctype-public="XSLT-compat" omit-xml-declaration="yes" encoding="UTF-8" indent="yes" />
<xsl:template match="recipes/recipe">
    <html>
        <head>
            <title>Recipes</title>
            <meta charset="utf-8" />
            <link rel="stylesheet" href="recipes.css" />
        </head>
        <body>
        <h1><xsl:value-of select="name"/></h1>
        <table>
            <tr>
                <td>
                    <xsl:value-of select="preparation_time"/><br/>
                    <br/>
                    <xsl:value-of select="cooking_time"/><br/>
                    <br/>
                    <xsl:value-of select="serves"/><br/>
                    <br/>
                    <xsl:value-of select="level"/><br/>
                    <br/>
                    <xsl:value-of select="overview"/><br/>
                    <h2>Ingredients</h2>
                    <ul>
                        <xsl:for-each select="ingredients/ingredient">
                            <li><xsl:value-of select="." /></li>
                        </xsl:for-each>
                    </ul>
                </td>
            </tr>
        </table>
        </body>
    </html>
</xsl:template>    
</xsl:stylesheet>

然后您可以将 css 样式应用于 li每种成分的元素。

如果您想输出每种成分的数量，那么这会稍微有点棘手，因为它们实际上不是当前 ingredient 的子元素。节点，但是兄弟节点，所有成分节点都有相同的父节点。但是，您可以这样做来显示数量:

 <li>
     <xsl:value-of select="." /> 
     <xsl:text> (</xsl:text>
     <xsl:value-of select="following-sibling::quantity[1]" />
     <xsl:text>)</xsl:text>
 </li>