html css 怎么画星形,纯 CSS 实现星型 ☆ 评级

今天，我们用纯CSS实现⭐️评级。

案例效果

分析：正常情况下为空心的☆，鼠标hover时，变为实心黄色的★.

HTML分析

div.star包裹5个span,每个span的内容为空心的☆.HTML代码如下：

☆☆☆☆☆

CSS分析

1.分析：当我们hover时，我们用实心的★覆盖空心的☆，并给实心的★设置color:gold;.

要覆盖空心的☆，我们要利用为元素::before，并赋予content:'★'.同时为了实现覆盖，而不是在之前添加内容，我们需要为元素设置position:absolute;.

这时，当你hover时，hover的☆就变为实体黄色的⭐️了。

2.接下来，我们要实现当我hover某个☆时，不仅这一个，它前面的☆也都要变为黄色实体的⭐️。

首先，我们要用到通用兄弟选择器~

在使用 ~ 连接两个元素时,它会匹配第二个元素,条件是它必须跟(不一定是紧跟)在第一个元素之后,且他们都有一个共同的父元素 .

比如：div~p就会匹配与div同辈的且在div之后的所有p元素。

当我们hover某个☆时，我们利用通用兄弟选择器使后面的☆也同时变为黄色实体星⭐️。

span:hover::before,

span:hover~span::before{