如何使用在 CSS 中的 XML 中声明的特定属性来设计网站

Question

这是我在汽车商店网站的xml代码，我想为CSS中以xml声明的每个项目属性添加不同的图像。如何访问 xml 的属性以从 CSS 添加图像。

<?xml-stylesheet href="catalog_18029952.css"  title="Test" media="screen"  type="text/css"?>

<items>
<item itemNum="1" itemType="Hatchback">
<description>A hatchback car is a vehicle that has a large door in the back that swings upward, While many other models also use this type of door, a hatchback car is traditionally looked at as a small coupe- to sedan-size car with a raise-open door in the back instead of a trunk.</description>
<quantity>7</quantity>
<car type="used">
<brandName>Maruti Swift</brandName>
<manufacturer>Suzuki</manufacturer>
<carInfo>Features on offer include auto LED projector headlamps with LED DRLs, tail lamps with LED brake lights, and a 7-inch touchscreen infotainment system with Apple CarPlay and Android Auto compatibility.it also gets rear parking sensors with parking camera.</carInfo>
<carType>Fuel</carType>
<color>Red</color>
<price>$9,000</price>
<previousOwner>Hardik Poudel</previousOwner>
</car>
</item> 
<!--information about the second car-->
<item itemNum="2" itemType="Luxury">
<description>The term luxury is used to categorize vehicles that are equipped with better performance capabilities, lavish interiors and all the latest safety and technology features. In the past, cars such as BMW and Land Rover were known as the luxury vehicles.</description>
<quantity>2</quantity>
<car type="new">
<brandName>Range Rover</brandName>
<manufacturer>Land Rover</manufacturer>
<carInfo>Land Rover’s most luxurious SUV, the Range Rover, is offered with four engine options in total - two petrol and two diesel.The diesel engine options are a 3.0-litre V6 unit making 258PS and a 4.4-litre V8 unit that churns out 340PS of power.</carInfo>
<carType>Fuel</carType>
<color>Blue</color>
<price>$390,000</price>
<interiorColor>Ivory leather</interiorColor>
</car>
</item>
</items>
</vehicles>

在这里，我想在XML中添加每个项目的不同图像，如何使用项目的特定属性以使其被选中。

Answer 1

标签只是..标记，因此与任何标记一样，您可以使用其在 CSS 中的属性来定位它们。希望这就是你要找的。但是，如果您需要更多的样式自由度，则可以使用模板来解析XML。

item{
background:#f00;
}
item[itemNum="1"]{
background:#00f;
}
item[itemNum="1"] color{
background:#fc0;
}

<?xml-stylesheet href="catalog_18029952.css"  title="Test" media="screen"  type="text/css"?>
<items>
<item itemNum="1" itemType="Hatchback">
<description>A hatchback car is a vehicle that has a large door in the back that swings upward, While many other models also use this type of door, a hatchback car is traditionally looked at as a small coupe- to sedan-size car with a raise-open door in the back instead of a trunk.</description>
<quantity>7</quantity>
<car type="used">
<brandName>Maruti Swift</brandName>
<manufacturer>Suzuki</manufacturer>
<carInfo>Features on offer include auto LED projector headlamps with LED DRLs, tail lamps with LED brake lights, and a 7-inch touchscreen infotainment system with Apple CarPlay and Android Auto compatibility.it also gets rear parking sensors with parking camera.</carInfo>
<carType>Fuel</carType>
<color>Red</color>
<price>$9,000</price>
<previousOwner>Hardik Poudel</previousOwner>
</car>
</item> 
<!--information about the second car-->
<item itemNum="2" itemType="Luxury">
<description>The term luxury is used to categorize vehicles that are equipped with better performance capabilities, lavish interiors and all the latest safety and technology features. In the past, cars such as BMW and Land Rover were known as the luxury vehicles.</description>
<quantity>2</quantity>
<car type="new">
<brandName>Range Rover</brandName>
<manufacturer>Land Rover</manufacturer>
<carInfo>Land Rover’s most luxurious SUV, the Range Rover, is offered with four engine options in total - two petrol and two diesel.The diesel engine options are a 3.0-litre V6 unit making 258PS and a 4.4-litre V8 unit that churns out 340PS of power.</carInfo>
<carType>Fuel</carType>
<color>Blue</color>
<price>$390,000</price>
<interiorColor>Ivory leather</interiorColor>
</car>
</item>
</items>
</vehicles>