CSS中0到100％的5星排名“寬度”％僅適用於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 ，其中句點字符被轉義，使其成為CSS中與HTML匹配的有效選擇器。

這是一個方便的角色轉義工具： https ： //mothereff.in/css-escapes