介绍
在很多网站或应用中，我们常常看到五颗星星用于评分。这种评分方式具有直观性和易用性，因此非常受欢迎。在本文中，我们将介绍如何使用 CSS 创建一个五星技能评分栏。
HTML 结构
首先，我们需要将五颗星星显示出来。为此，我们可以使用 Unicode 符号 "★" 和 "☆"，分别代表实心星星和空心星星。
我们可以创建一个 div 元素，用来包裹五个 span 元素，每个 span 元素代表一个星星。如下所示：
<div class="rating">
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
<span>★</span>
</div>
CSS 样式
为了将五颗星星放在一行上，我们需要将 rating div 的 display 属性设置为 inline-block。
.rating {
display: inline-block;
}
现在，我们需要使用伪元素 :before 和 :after 来插入实心和空心星星。
打开 Unicode 表格，找到实心星星和空心星星的编码值，分别是 "2605" 和 "2606"。
现在，我们可以使用 content 属性将实心和空心星星插入到 rating div 中的 span 元素中。
我们将每个 span 元素的宽度设置为 1em，高度设置为 1em，并设置 overflow 属性为 hidden。这样，当我们显示半颗星星时，隐藏的部分将会被裁剪掉。
下面的 CSS 代码实现了这些功能：
.rating {
display: inline-block;
}
.rating > span {
display: inline-block;
position: relative;
width: 1em;
height: 1em;
margin: 0;
padding: 0;
overflow: hidden;
}
.rating > span:before,
.rating > span:after {
content: "☆";
display: inline-block;
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
line-height: 1em;
font-size: 1em;
}
.rating > span:before {
content: "★";
color: #ffcc33;
}
.rating > span[data-rating="0.5"]:before,
.rating > span[data-rating="1"]:before,
.rating > span[data-rating="1.5"]:before,
.rating > span[data-rating="2"]:before,
.rating > span[data-rating="2.5"]:before,
.rating > span[data-rating="3"]:before,
.rating > span[data-rating="3.5"]:before,
.rating > span[data-rating="4"]:before,
.rating > span[data-rating="4.5"]:before,
.rating > span[data-rating="5"]:before {
content: "★";
}
.rating > span[data-rating="0.5"]:after {
content: "?";
color: #ffcc33;
}
.rating > span[data-rating="1.5"]:after {
content: "?";
}
.rating > span[data-rating="2.5"]:after {
content: "?";
}
.rating > span[data-rating="3.5"]:after {
content: "?";
}
.rating > span[data-rating="4.5"]:after {
content: "?";
}
上述代码使用 CSS 的伪元素 :before 和 :after 来插入实心和空心星星。其中，:before 对应实心星星，:after 对应空心星星。
另外，我们还在每个 span 元素中添加了一个 data-rating 属性，用于表示该星星的评分值。例如，如果我们想要显示 3.5 颗星星，我们可以将第一颗星星的 data-rating 属性设置为 "3.5"。
最后，我们通过 CSS 代码设置了每个 span 元素的星星样式。如果 data-rating 属性的值为小数，我们将在对应的空心星星后面添加半颗星星。
完整代码
下面的代码是我们完整的 CSS 样式代码：
.rating {
display: inline-block;
}
.rating > span {
display: inline-block;
position: relative;
width: 1em;
height: 1em;
margin: 0;
padding: 0;
overflow: hidden;
}
.rating > span:before,
.rating > span:after {
content: "☆";
display: inline-block;
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
line-height: 1em;
font-size: 1em;
}
.rating > span:before {
content: "★";
color: #ffcc33;
}
.rating > span[data-rating="0.5"]:before,
.rating > span[data-rating="1"]:before,
.rating > span[data-rating="1.5"]:before,
.rating > span[data-rating="2"]:before,
.rating > span[data-rating="2.5"]:before,
.rating > span[data-rating="3"]:before,
.rating > span[data-rating="3.5"]:before,
.rating > span[data-rating="4"]:before,
.rating > span[data-rating="4.5"]:before,
.rating > span[data-rating="5"]:before {
content: "★";
}
.rating > span[data-rating="0.5"]:after {
content: "?";
color: #ffcc33;
}
.rating > span[data-rating="1.5"]:after {
content: "?";
}
.rating > span[data-rating="2.5"]:after {
content: "?";
}
.rating > span[data-rating="3.5"]:after {
content: "?";
}
.rating > span[data-rating="4.5"]:after {
content: "?";
}
使用示例
我们可以在 HTML 文档中插入 rating div 的实例，如下所示：
<div class="rating">
<span data-rating="0.5"></span>
<span data-rating="3.5"></span>
<span data-rating="4"></span>
<span data-rating="2.5"></span>
<span data-rating="5"></span>
</div>
在这个例子中，我们显示了五颗星星，第一颗星星显示半颗，第二颗星星显示三颗半，第三颗星星显示四颗，第四颗星星显示二颗半，第五颗星星显示五颗。实际显示效果如下：
总结
在本文中，我们学习了如何使用 CSS 创建一个五星技能评分栏。我们使用 Unicode 符号 "★" 和 "☆" 分别代表实心星星和空心星星，并使用 CSS 的伪元素 :before 和 :after 插入星星。我们还通过在 span 元素中添加 data-rating 属性来表示每颗星星的评分值。最后，我们通过样式设置，将实心和空心星星以及半颗星星显示在对应的 span 元素中。