The difference between a.class and a .class, pay attention to the spaces - CSS debugging tips

This problem will occur when using picture wizard technology to position pictures. Sometimes a space will cause many problems. This article introduces the difference between a.class and a.class with examples. (CSS video tutorial)

The first group

<a href="#"><span class="ico-manage">管理</span></a>

Use style one:

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

At this time, the mouse passes over the word "Management" and the color is black

Use style 2:

a:hover{color:black}
a:hover .ico-manage{color:red;} //注意空格

At this time, the mouse passes over the word "Management" and the color is red

The second group

<a href="#" class="ico-manage">管理</a>

Use style One:

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

At this time, the mouse passes over the word "Management" and the color is red

Use style two:

a:hover{color:black}
a:hover .ico-manage{color:red;} //注意空格

At this time, the mouse passes over the word "Management" and the color is black

For the first group a and .ico-manage, .ico-manage belongs to span The label is of a different level than a; and for the second group of a and .ico-manage, .ico-manage belongs to the label of a, that is, it is of the same level as a. From this, we can draw a conclusion:

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

2. When class is an attribute of the sub-tag, then The style is written as: tag+space+class name

The above is the detailed content of The difference between a.class and a .class, pay attention to the spaces - CSS debugging tips. For more information, please follow other related articles on the PHP Chinese website!