Html “五星级排名”；宽度%CSS中的0-100%仅适用于20/40/60/80/100，但不适用于例如70%

我有个问题。我使用胡须代码来触发内容。 现在我在网站上有一个5星级的评论等级，但是为了触发内容而不使用代码，我用胡子代码做了覆盖。一切正常。但是，举例来说，如果源代码中的评级是4.5星，那么它并没有填满星星。但在源代码中，该类更改为

bcrating4.5

这是我的代码：

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

CSS:

.bcrating0{
宽度：0%；
}
.B评级1{
宽度：20%；
}
B.评级2{
宽度：40%；
}
B.评级3{
宽度：60%；
}
B.评级4{
宽度：80%；
}
B.评级5{
宽度：100%；
}

如果

{{rating}

传入的值为“4.5”，则该

.rating

元素在HTML中的类名为

bcrating4.5

。HTML可以将句点作为有效类名的一部分

在CSS中，您只有类

.bcrating4

和

.bcrating5

。没有匹配的

您需要定义一个类

.bcrating4\.5

，在该类中转义句点字符，使其成为CSS中与HTML匹配的有效选择器

这是一个方便的字符转义工具：

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