2017-09-01 9 views
1

問題があります。私は口ひげコードを使ってコンテンツをトリガーします。 私はウェブサイトで5つ星評価を受けていますが、コードを入れずにコンテンツをトリガーするには、口ひげコードでオーバーレイを作成しました。すべてがうまくいきます。しかし、例えば、ソースコードで評価が4.5星であれば、それは星を満たしません。しかし、ソースコードでは、クラスはbcrating4.5に変更されています。CSSの0〜100%の5つのランクの「幅」%は20/40/60/80/100でのみ動作しますが、たとえば70%では使用できません

これは私のコードです:

<span class="rating bcrating{{rating}}"></span> 

ratingクラスは、サイトから元のコードです。
bcratingは、CSSコードの下のクラスです。
口ひげ{{rating}}がトリガーコードです。

<p id="hiddenrating" hidden>{{rating}}</p>{{#recommendations}}           

    <ul class="box-content box-related" id="viewed-product-list"> 
    <li class="item" style="width:16.57%"> 
     <div class="item-info grid_2 alpha">   {{#image}}                                                                                                                                                                                                                                                       
     <a class="product-image" href="{{URL}}" title="{{name}}"> 
      <img src="{{image}}" alt="{{name}}" style="width:50%"> 
     </a> {{/image}}                                                                                                                                                                                                                                                                                                     
     <div class="product-details"> 
      <a href="{{URL}}" title="{{name}}"> 
      <span class="product-name">{{name}}</span> 
      <div class="price leden"> 
       <span class="old_price"> 
       <strong>{{old_price}}</strong> 
       </span> 
       <span class="new_price"> 
       <strong>{{new_price}}</strong> 
       </span> 
      </div> 
      </a> 
      <div class="product-review-block"> 
      <span class="fivestar"> 
       <span class="rating-box"> 
       <a class="nobr" href="{{URL}}#customer-reviews-tab"> 
       </a> 
       <span class="rating bcrating{{rating}}"></span> 
       </span> 
      </span> 
      </div> 
     </div> 
     </div> 
    </li> 
    </ul>{{/recommendations}} 

CSS: "4.5" の値で

.bcrating0 { 
    width:0%; 
} 
.bcrating1 { 
    width:20%; 
} 
.bcrating2 { 
    width:40%; 
} 
.bcrating3 { 
    width:60%; 
} 
.bcrating4 { 
    width:80%; 
} 
.bcrating5 { 
    width:100%; 
} 

答えて

3

{{rating}}場合はパス、HTMLでその.rating要素のクラス名はbcrating4.5です。 HTMLには有効なクラス名の一部としてピリオドを付けることができます。

あなたのCSSには、クラス.bcrating4.bcrating5しかありません。一致するものはありません。

期間文字がエスケープされるクラス.bcrating4\.5を定義する必要があります。これは、HTMLに一致する有効なセレクタになります。

この便利な文字がエスケープされるツール:https://mothereff.in/css-escapes

関連する問題