純粋なCSSは星の採点の特効のコンポーネントを実現します

参考掘金の文章:https://juejin.im/post/5d57adf5f265da03e3697e1b(作者:賢いトム)
HTML

CSS
:checked、選択されているものを選択します.star要素(選択されたinput要素).
~を選択する.star:checked要素の後ろにあるすべてのinput兄弟要素.

.parent {
      display: flex;
      flex-flow: row-reverse; /*  .star           */
      width: 150px;
      font-size: 0px;
    }

    input { /*   radio     */
      -webkit-appearance: none; 
      border: none;
      outline: none;
      cursor: pointer;
      margin: 0px;
    }

    .star { 
      height: 30px;
      width: 30px;
      background: url("./img/star.svg") no-repeat;
      background-size: 30px;
    }

    .star:checked,
    .star:checked~input {
      background: url("./img/star-fill.svg") no-repeat;
      background-size: 30px;
    }

    .star:hover,
    .star:hover~input {
      background: url("./img/star-fill.svg") no-repeat;
      background-size: 30px;
    }

JS

// JS             
document.querySelector("[type=submit]").addEventListener("click", () => {
    alert(getRate());
  })

  function getRate() {
    let rateList = document.querySelectorAll("[name=rate]");
    for (let i = 0; i < rateList.length; i++) {
      if (rateList[i].checked)
        return 5 - i; //   flex-flow: row-reverse .star     
    }
    return "   "
  }

マイホームページ:https://blog.csdn.net/qq_29750277