在CSS中，0 - 100％的5星级“宽度”％仅适用于20/40/60/80/100，但不适用于例如70％

我遇到问题。我使用胡子代码来触发内容。现在我在网站上有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：

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

来源

2017-09-01 Puck

如果{{rating}}通行证在 “4.5” 的值，你的类名中的HTML元素.rating是bcrating4.5。 HTML可以将句点作为有效类名的一部分。

在你的CSS中，你只有类.bcrating4和.bcrating5。没有任何匹配

您需要定义一个.bcrating4\.5类，其中句点字符被转义，使其成为CSS中与HTML匹配的有效选择符。

这是一个方便的角色转义工具：https://mothereff.in/css-escapes

来源

2017-09-01 19:45:18 fontophilic

在CSS中，0 - 100％的5星级“宽度”％仅适用于20/40/60/80/100，但不适用于例如70％

回答

相关问题