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

时间:2016-04-20 16:09:15

标签: css xml css3 css-selectors xml-namespaces

目前我正在使用列出的XML文件,并附加了以下两个CSS文件。我无法安静地找出原因,但是当我在CSS文件中添加前缀时,它完全忽略了该区域的格式化。

XML文件:     

string Type ="Book" or string Type = "Car"

第一个CSS文件

Where TenantId ="XXXX" AND Type = "Car"

第二

<?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>

我做错了什么?如果我没有将rec或men放在CSS中,那么所有内容都遵循关于itemName和Description的recipe.css规则。

1 个答案:

答案 0 :(得分:1)

这里有两个问题:

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

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

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

    <强> menu.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;
    }