The difference between A.class and A. Class, note the space-CSS debugging tips

This problem occurs when using picture sprites to position images, and sometimes a space can cause a lot of problems, this article introduces the difference between A.class and Class A. (CSS video tutorial)

First Group

<a href= "#" ><span class= "Ico-manage" > Management </span></a>

Use style one:

a:hover{color:black}a:hover.ico-manage{color:red;}

At this point the mouse is "managed" 2 words, the color is black

Use style two:

A:hover{color:black}a:hover. ico-manage{color:red;}//Note spaces

At this point the mouse is "managed" 2 words, the color is red

Second group

<a href= "#" class= "Ico-manage" > Management </a>

Use style one:

a:hover{color:black}a:hover.ico-manage{color:red;}

At this point the mouse is "managed" 2 words, the color is red

Use style two:

A:hover{color:black}a:hover. ico-manage{color:red;}//Note spaces

At this point the mouse is "managed" 2 words, the color is black

For the first group A and. Ico-manage,. Ico-manage belong to the span tag, with a different level, and for the second group A and. Ico-manage,. Ico-manage is a tag, which is the same as a, thus a conclusion can be drawn:

1. When class is an attribute in the current tag, the style is written as: Label +class name

2. When class is a property of a child tag, the style is written as: Label + space +class name