xml - 在具有相同元素名称的一个 XML 上使用多个 CSS

Question

目前我正在使用列出的 XML 文件并附加了以下两个 CSS 文件。我想不出为什么，但是当我在 CSS 文件中添加前缀时，它会完全忽略该区域的格式。

XML文件:

<?xml-stylesheet type="text/css" href="menu.css" ?>
<?xml-stylesheet type="text/css" href="recipe.css" ?>

<men:menuItem xmlns:men="http://example.com/chestershartland/menu"      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  xsi:schemaLocation="http://example.com/chestershartland/menu menu.xsd">
<men:itemName>Oatmeal Breakfast</men:itemName>
<men:description>
 <![CDATA[Our oatmeal is served warm with fresh fruit, pecans, raisins,
  and 100% maple syrup. Available all day.
 ]]>
 </men:description>
     <men:price>6.95</men:price>
     <men:icon>&#9824;</men:icon>  
    <men:icon>&#9829;</men:icon>

<rec:recipe xmlns:rec="http://example.com/chestershartland/recipe" xsi:schemaLocation="http://example.com/chestershartland/recipe recipe.xsd">

  <rec:itemName>Oatmeal Breakfast</rec:itemName>
  <rec:ingredients>
     <rec:ingredient>1/3 c steel cut oats</rec:ingredient>
     <rec:ingredient>1-1/4 c water</rec:ingredient>
     <rec:ingredient>1/4 t salt</rec:ingredient>
  </rec:ingredients>
  <rec:directions>
  <![CDATA[Bring water to a boil. Add salt and oats, stir, and lower heat
     to lowest setting. Cover and let stand 2 hours.
  ]]>
  </rec:directions>

第一个 CSS 文件

@namespace men "http://example.com/chestershartland/menu"

menuItem {
display: block; 
width: 680px; 
font-family: Garamond, "Times New Roman", Times, serif; 
font-size: 12pt; 
margin: 5px; 
padding: 15px;
}
men|itemName {
display: block; 
margin-top: 10pt; 
margin-left: 15pt; 
font-weight: bold; 
color: purple;
}
men|description {
display: block; 
margin-left: 40px;
}
icon {
display: inline-block; 
color: green;
}
price {
margin-left: 35pt; 
display: inline-block; 
color: blue;
}

第二

@namespace rec "http://example.com/chestershartland/recipe"

recipe {
display: block;
margin-left: 20px;
margin-top: 20px;
border: 1px solid purple;
background: ivory;
padding: 10px;
}
rec|itemName {
display: none;
}
ingredient {
display: block;
color: green;
}
rec|directions {
display: block;
color: black;
margin-top: 10px;
}

我做错了什么？如果我不将 rec 或 men 放在 CSS 中，那么一切都将遵循关于 itemName 和 Description 的 recipe.css 规则。

Answer 1

这里有两个问题:

1. 您的 @namespace 规则缺少分号。

2. 您的所有元素都已命名空间，但您的命名空间前缀不一致。在处理命名空间元素时，每个选择器都需要在 CSS 中命名空间，就像在 XML 中一样。

由于每个命名空间都有一个样式表，您的生活变得更加轻松:您不需要在 CSS 中添加命名空间前缀。您可以简单地将每个命名空间指定为每个样式表的默认命名空间，每个没有命名空间前缀的选择器都将使用该样式表的默认命名空间。您通过省略标识符来声明默认命名空间，因此它只是 @namespace 后跟命名空间 URI。

菜单.css

@namespace "http://example.com/chestershartland/menu";

menuItem {
    display: block; 
    width: 680px; 
    font-family: Garamond, "Times New Roman", Times, serif; 
    font-size: 12pt; 
    margin: 5px; 
    padding: 15px;
}
itemName { /* Only applies to men:itemName elements */
    display: block; 
    margin-top: 10pt; 
    margin-left: 15pt; 
    font-weight: bold; 
    color: purple;
}
description {
    display: block; 
    margin-left: 40px;
}
icon {
    display: inline-block; 
    color: green;
}
price {
    margin-left: 35pt; 
    display: inline-block; 
    color: blue;
}

recipe.css

@namespace "http://example.com/chestershartland/recipe";

recipe {
    display: block;
    margin-left: 20px;
    margin-top: 20px;
    border: 1px solid purple;
    background: ivory;
    padding: 10px;
}
itemName { /* Only applies to rec:itemName elements */
    display: none;
}
ingredient {
    display: block;
    color: green;
}
directions {
    display: block;
    color: black;
    margin-top: 10px;
}