如何判断一张图片的左边右边

Question

现在要实现的效果是，点击星星的左半边分值加一，右边加二，好像用css sprite可以实现，大概是怎样的实现逻辑，如何定位？

Answer 1

實現jsFiddle說明基本上可以分成幾個部分：redio&nbsp;本身的樣式不可修改 ， 但是因為&nbsp;radio&nbsp;後的&nbsp;label&nbsp;可以操作前面對應的&nbsp;radio&nbsp;而且&nbsp;label&nbsp;樣式是可修改的， 所以我們可以通過隱藏&nbsp;radio input&nbsp;本身 ， 然後修改&nbsp;label&nbsp;來達成自定義樣式的效果至於左右邊分開效果，Font Awesome&nbsp;有提供完整星星和半顆星的&nbsp;icon，可以利用其來達成你說的半顆星效果.rating&nbsp;>&nbsp;input:checked&nbsp;~&nbsp;label,&nbsp;//&nbsp;代表每個被選中的&nbsp;radio&nbsp;後面的&nbsp;label.rating&nbsp;>&nbsp;label:hover,&nbsp;//&nbsp;代表每個&nbsp;hover&nbsp;狀態的&nbsp;label.rating&nbsp;>&nbsp;label:hover&nbsp;~&nbsp;label&nbsp;{&nbsp;color:&nbsp;#FFD700;&nbsp;&nbsp;}&nbsp;//&nbsp;代表每個&nbsp;hover&nbsp;狀態後面的&nbsp;label.rating&nbsp;>&nbsp;input:checked&nbsp;+&nbsp;label:hover,.rating&nbsp;>&nbsp;input:checked&nbsp;~&nbsp;label:hover,.rating&nbsp;>&nbsp;label:hover&nbsp;~&nbsp;input:checked&nbsp;~&nbsp;label,.rating&nbsp;>&nbsp;input:checked&nbsp;~&nbsp;label:hover&nbsp;~&nbsp;label&nbsp;{&nbsp;color:&nbsp;#FFED85;&nbsp;&nbsp;}會覺得奇怪的是，&nbsp;~&nbsp;是指&nbsp;之後&nbsp;的元素，那為什麼是高亮的星星是從左邊開始，其實：.rating&nbsp;>&nbsp;label&nbsp;{&nbsp; &nbsp;&nbsp;color:&nbsp;#ddd;&nbsp; &nbsp;&nbsp;float:&nbsp;right;&nbsp;//&nbsp;<-- }float: right&nbsp;後，在&nbsp;Html&nbsp;中前面的會變成最右邊 ， 但是&nbsp;css&nbsp;選擇器是看&nbsp;Html&nbsp;實際順序。