CSS 中的 5 星排名从 0 - 100% "width"% 仅适用于 20/40/60/80/100，但不适用于例如 70%

Question

我有问题。我使用胡须代码来触发内容。现在，我在网站上有一个5星级的评分评分，但是为了触发内容而无需进入代码，我用胡须代码进行了覆盖。一切正常。但是，例如，如果在源代码中，等级为4.5星，则不会填充星星。但是在源代码中，类更改为 bcrating4.5。

这是我的代码：

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

Answer 1

如果 {{rating}}以" 4.5"的值传递，则html中该 .rating元素的类名为 bcrating4.5。HTML可以将期限作为有效的类名称的一部分。

在您的CSS中，您只有.bcrating4和.bcrating5类。没什么匹配的。

您需要定义一个 .bcrating4.5的类别，其中周期字符被逃脱，使其成为与您的HTML匹配的CSS中的有效选择器。

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