實現

jsFiddle

說明

基本上可以分成幾個部分：

redio 本身的樣式不可修改 ， 但是因為 radio 後的 label 可以操作前面對應的 radio 而且 label 樣式是可修改的， 所以我們可以通過隱藏 radio input 本身 ， 然後修改 label 來達成自定義樣式的效果

至於左右邊分開效果，Font Awesome 有提供完整星星和半顆星的 icon，可以利用其來達成你說的半顆星效果

.rating > input:checked ~ label, // 代表每個被選中的 radio 後面的 label
.rating > label:hover, // 代表每個 hover 狀態的 label
.rating > label:hover ~ label { color: #FFD700;  } // 代表每個 hover 狀態後面的 label

.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label { color: #FFED85;  } 

會覺得奇怪的是， ~ 是指 之後 的元素，那為什麼是高亮的星星是從左邊開始，其實：

.rating > label { 
  color: #ddd; 
  float: right; // <--
}

float: right 後，在 Html 中前面的會變成最右邊 ， 但是 css 選擇器是看 Html 實際順序。

把星星一分为二啊，left和right

star rate 一般不会 精确的1...10
一般会采用 1,2,3,4,5
或者2,4,6,8,10的机制

1星 是1或者2
2星 是2或者4
3星 是3或者6
4星 是4或者8
5星 是5或者10

半星一般只在显示的时候会出现，比如7分 就是 三星半

https://www.baidu.com/s?wd=css%20rate%20star

可以考虑鼠标的点击位置，建一个包含十个元素的数组，每个元素是一个宽度区间，
点击时判断鼠标位置处于哪个区间，得出相应的分数。
至于图片布局，两张图片，一张灰色一直处于底部，一张红色处于上面，
通过改变红色图片的宽度（overflow:hidden）来实现对应的分数。

思路仅供参考。

只能用笨办法，纯js就像楼上说的，判断点击区域，或者用html里面的area来设置点击区域

我的想法：
把一颗星星当做一个单元，DOM结构如下：
p.start-wrapper包含两个子节点span.left-part(display:inline-block)和span.right-part(display:inline-block)