通過CSS操作xslt菜單

Question

好吧;使用一把umbraco CMS我有以下述方式被產生的XSLT菜單：

<xsl:output method="xml" omit-xml-declaration="yes" /> 

    <xsl:param name="currentPage"/> 

    <!-- Input the documenttype you want here --> 
    <xsl:variable name="level" select="1"/> 

    <xsl:template match="/"> 


<ul id="topNavigation"> 
     <li class="home"> 
     <xsl:if test="$currentPage/@id = $currentPage/ancestor-or-self::* [@level=$level]/@id"> 
      <xsl:attribute name="class">home current</xsl:attribute> 
     </xsl:if> 
     <a href="/">Home</a> 
     </li> 
     <xsl:for-each select="$currentPage/ancestor-or-self::* 
     [@level=$level]/* 
     [@isDoc and string(umbracoNaviHide) != '1']"> 
    <li> 
    <xsl:if test="@id = $currentPage/@id"> 
     <xsl:attribute name="class">current</xsl:attribute> 
     </xsl:if> 
    <a class="navigation" href="{umbraco.library:NiceUrl(@id)}"> 
     <span><xsl:value-of select="@nodeName"/></span> 
    </a> 
    </li> 


</xsl:for-each> 
</ul> 

    </xsl:template> 

它循環通過至少一個XML紙張（我並不十分熟悉XSLT），其通過附加頁到生成所述菜單菜單系統。我相信這個片段的XML具有十分重要的意義在這個過程中

<p><a href="http://umbraco.org/get-started" 
title="Get Started with Umbraco">Get more information</a> about the 
umbraco way.</p> 
]]></bodyText> 
     <umbracoNaviHide>0</umbracoNaviHide> 
     </umbTextpage> 
     <umbTextpage id="1071" parentID="1068" level="3" writerID="0" creatorID="0" nodeType="1059" template="1052" sortOrder="3" createDate="2010-09-07T13:19:40" updateDate="2012-06-04T21:47:02" nodeName="Getting started" urlName="getting-started" writerName="redacted" creatorName="redacted" path="-1,1061,1068,1071" isDoc=""> 

     <bodyText><![CDATA[ 
<p>&nbsp;</p> 

<p>&nbsp;</p> 

<p>&nbsp;</p> 
]]></bodyText> 
     <umbracoNaviHide>0</umbracoNaviHide> 
     </umbTextpage> 
    </umbTextpage> 
    <umbTextpage id="1177" parentID="1061" level="2" writerID="0" creatorID="0" nodeType="1059" template="1052" sortOrder="4" createDate="2012-06-05T11:28:36" updateDate="2012-06-05T11:33:13" nodeName="Our Clients" urlName="our-clients" writerName="redacted" creatorName="redacted" path="-1,1061,1177" isDoc=""> 
     <bodyText><![CDATA[ 
<h3>Our Clients</h3> 

<p>etc. etc.</p> 

<!-- endUmbMacro -->]]></bodyText> 
     <umbracoNaviHide>0</umbracoNaviHide> 
    </umbTextpage> 
    <umbTextpage id="1072" parentID="1061" level="2" writerID="0" creatorID="0" nodeType="1059" template="1052" sortOrder="5" createDate="2010-09-07T13:20:06" updateDate="2012-06-08T11:23:26" nodeName="Contact us" urlName="contact-us" writerName="redacted" creatorName="redacted" path="-1,1061,1072" isDoc=""> 
     <bodyText><![CDATA[ 
<h3>Office address</h3> 

例如，節點名稱作爲字符串選項卡的內容（即有標有「我們的客戶」和「聯繫我們」選項卡從上面的xml代碼，他們的訂購方式與他們上面寫的相同

我的問題涉及的事實，我需要能夠更改各個標籤的背景色 - 沒有它們都是相同的顏色，但是，唯一標識符唯一的標籤似乎是主頁選項卡。在相關的CSS數據中：

#naviWrap { background-color:#000; background-color:rgba(0,0,50,0.5); margin:15px 0 0 0; } /*menu */ 
#topNavigation { border-left:1px solid rgba(255,255,255,0.25); margin:0 auto; width:960px; } 
#topNavigation li { border-left:1px solid rgba(0,0,0,0.25); border-right:1px solid rgba(255,255,225,0.25); display:inline-block; height:60px; line-height:60px; text-align:center; } 
#topNavigation li a { color:#fff; display:block; font-size:11px; height:60px; padding:0 30px; text-decoration:none; text-transform:uppercase; font-style: italic; font-weight:bold;} 
#topNavigation li a:hover { background-color:#000; background-color:rgba(0,0,0,0.2); text-decoration:none; } 
#topNavigation li.current { background-color:#200; background-color:rgba(350,0,100,0.5); } 
#topNavigation li.current a {} 

li.current與主頁選項卡（菜單中的第一個選項卡）相關，而其餘選項卡由naviWrap控制。 'li a'涉及標籤的文字顏色。

所以有什麼辦法可以單獨控制CSS中的選項卡;我認爲它必須在xml級別完成（例如，與諸如umbTextpage id =「1177」之類的事情相關），或者在xslt菜單生成中，其中某些參考點被分配給菜單選項卡在此刻。

對不起，過長的問題 - 任何幫助將大規模讚賞！

Answer 1

你可以試試這個，在你的XSL文件，這是這就是for-each循環內的位：根據您for-each循環的position()每個<li>

<li> 
    <xsl:attribute name="class">list-<xsl:value-of select="position()"/><xsl:if test="@id = $currentPage/@id"> current</xsl:if></xsl:attribute> 
    <a class="navigation" href="{umbraco.library:NiceUrl(@id)}"> 
     <span><xsl:value-of select="@nodeName"/></span> 
    </a> 
    </li> 

基本上你添加一個類，爲您提供以下類型的輸出：

<li class="list-0"> 
<li class="list-1"> 
<li class="list-2 current"> //current will appear on the right li item as before, along with list-n class 

，然後它會很容易用CSS來定位每個<li>的：

#topNavigation li.list-0 { 
    background-color: #f00; 
} 
#topNavigation li.list-1 { 
    background-color: #0f0; 
} 
#topNavigation li.list-2 { 
    background-color: #00f; 
} 

等

我的XSLT是很生疏的，所以語法可能是不正確的 - 但它應該是足夠好給你指出正確的方向！