Span: the hover mouse hover effect is not successful solution

Span: hover. However, after debugging for a long time, the hover effect is not shown.

 

Span {display: block; width: 110px; height: 40px ;}
Span: hover {background: 0-40px ;}
Span. button-1 {background: url (../images/tabs/button_1.png );}

The result of the sample test is different from what I expected. I want to define the background image in span. button-1, and then the hover will display the hover effect when the mouse passes. It should have been moved to the first 40th pixels of the background, but only the original image is displayed.
After multiple tests, we finally found that the writing Order of the pseudo classes is incorrect. I checked the materials online. It is true that pseudo classes have clear writing order rules. If they are wrong, the display results may be incorrect.
Later, I analyzed my css tutorial and found that the last line of the button-1 style overwrites the hover background. Put the pseudo class to the end, that is, the pseudo class must be written after the selector. Solve the problem.

Although my problem is not very relevant to the order between pseudo classes, the order between these pseudo classes is worth noting, and the same problem will occur in the future.
The order is as follows:

A: link
A: visited
A: hover
A: active