现在让我们添加一点css来生成content.star-item[title="garbage"]:hover~.star-tip:after{contnet:"garbage"}这样当鼠标滑过第一颗星时，后面会产生一点垃圾提示完整的写法是.star-item[title="garbage"]:hover~.star-tip:after{contnet:"garbage"}.star-item[title="verypoor"]:hover~.star-tip：after{contnet:"Verybad"}.star-item[title="Normal"]:hover~.star-tip:after{contnet:"Normal"}.star-item[title="Verygood"]:hover~.star-tip:after{contnet:"verygood"}.star-item[title="perfect"]:hover~.star-tip:after{contnet:"perfect"}这应该允许鼠标移动到它会提示相应的文字，但是你不觉得这种写法有点不智能吗？它只是复制和粘贴。如果你有Less或Sass，你可以简单地写一个循环来自动生成这些，但本质还是一样的。写这么多重复代码是没办法合并的。css就没有办法了吗？其实还是有一些的。我们需要用到content的attr函数，就是获取对应属性的值，表示有点变量，比如这样span会根据自己的a属性生成内容。现在我们把之前添加的去掉，就不可能再用了就是生成了，我们现在需要根据标签自己生成内容，添加下面的css。star{position:relative;/*添加相对定位，因为生成的内容是相对于最外层的*/}.star-item:after{/*dotstyle*/position:absolute;宽度：100px；字体大小：14px；高度：20px；行高：20px；右：0；右边距：-105px；color:#666}.star-item:hover:after{content:attr(title)}这还不够，我们还需要根据:checkedinput[type="radio"]:checked+.star-item:after{/*选择下一个与input相邻的标签*/content:attr(title)}来记住当前选项有问题这里，label输入的顺序是颠倒的，这里我们颠倒过来，所以需要固定前面的代码