在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%;
}
答
如果{{rating}}
通行证在 “4.5” 的值,你的类名中的HTML元素.rating
是bcrating4.5
。 HTML可以将句点作为有效类名的一部分。
在你的CSS中,你只有类.bcrating4
和.bcrating5
。没有任何匹配
您需要定义一个.bcrating4\.5
类,其中句点字符被转义,使其成为CSS中与HTML匹配的有效选择符。
这是一个方便的角色转义工具:https://mothereff.in/css-escapes