評価システムが正しく表示されない

Question

出力がウェブサイトに表示されているものと異なる理由がわかりません（http://dabblet.com/gist/1722368）誰でも助けてくれますか？お願いします。 xslt/xmlを通じてページに複数の評価システムを作成しようとしています。

これは私のXSLTコードです：

<div class="rating"> 
       <xsl:element name="input"> 
        <xsl:attribute name="type">radio</xsl:attribute> 
        <xsl:attribute name="value">5</xsl:attribute> 
        <xsl:attribute name="name">myrating</xsl:attribute> 
       </xsl:element> 
       <label>☆</label> 

       <xsl:element name="input"> 
        <xsl:attribute name="type">radio</xsl:attribute> 
        <xsl:attribute name="value">4</xsl:attribute> 
        <xsl:attribute name="name">myrating</xsl:attribute> 
       </xsl:element> 
       <label>☆</label> 
       <xsl:element name="input"> 
        <xsl:attribute name="type">radio</xsl:attribute> 
        <xsl:attribute name="value">3</xsl:attribute> 
        <xsl:attribute name="name">myrating</xsl:attribute> 
       </xsl:element> 
       <label>☆</label> 
       <xsl:element name="input"> 
        <xsl:attribute name="type">radio</xsl:attribute> 
        <xsl:attribute name="value">2</xsl:attribute> 
        <xsl:attribute name="name">myrating</xsl:attribute> 
       </xsl:element> 
       <label>☆</label> 
       <xsl:element name="input"> 
        <xsl:attribute name="type">radio</xsl:attribute> 
        <xsl:attribute name="value">1</xsl:attribute> 
        <xsl:attribute name="name">myrating</xsl:attribute> 
       </xsl:element> 
       <label>☆</label> 
       </div> 

私のCSSコード：

.rating { 
    unicode-bidi: bidi-override; 
    direction: rtl; 
    text-align: center; 

    } 
    .rating > label{ 
    display: inline-block; 
    position: relative; 
    width: 1.1em; 
    } 
    .rating > *:hover, 
    .rating > *:hover ~ label, 
    .rating:not(:hover) > input:checked ~ label{ 
    color: transparent; 
    } 
    .rating > *:hover:before, 
    .rating > *:hover ~ label:before, 
    .rating:not(:hover) > input:checked ~ label:before { 
    content: "\2605"; 

    left: 0; 
    color: gold; 
    } 

    .rating > input { 
    margin-left:-1.1em; 
    margin-right:0; 
    top:3px; 
    width:1.1em; 
    height:1.1em; 
    position:relative; 
    z-index:2; 
    opacity:0; 
    } 

Answer 1

全体のことは、XSLTとは何の関係もありません。

スパムタグをラベルに置き換えて、元のページを変更したことがわかりました。

はどうやらあなたはラベルタグは、それがに接続されている入力タグのIDに等しい値 と属性のを持っている必要があることを、忘れてしまいました。

は、だから私はラベルタグに入力にタグとそれぞれのの属性を属性 IDを追加し、それが動作します。

jsfiddle（6to6zfw2）の作業例を確認してください。