Proficient in CSS reading notes

1. Order of Pseudo-classes: link->visited->hover (Focus)->active.

2. The particularity of selectors: a. inline style; b.ID selector; C. class, Pseudo-class, attribute selector (example: Class attribute); D. Number of type selectors and pseudo-element selectors (example: P label). The greater the ABCD, the higher the priority.

3. Relative positioning occupies the original space, absolute positioning and fixed positioning do not occupy the original space.

4. How to clear the float:

A.<div class= "Class" ></div>

. Clear{clear:both;}

B. Add to its parent: Overflow:hidden;

C. Add a clear class label to the parent

. clear:after{

Content: "";

heigth:0;

Visibility:hidden;

Display:block;

Clear:both

}

5.IMG below 3px bug, Workaround: A. Add font-size:0 to the parent; B.img{display:block;}.

6.a:visited under the background-position does not work.

7. Create a drop-down menu from CSS. *

8. Title:

. Remote a:hover. Hotspot,
. Remote A:focus. Hotspot {
color:red;
}

<ul class= "Remote" >
<li>
<a href= "#" >
<span class= "Hotspot" >aaa</span>
<span class= "link" >bbb</span>
</a>
</li>
<li>
<a href= "#" >
<span class= "Hotspot" >ccc</span>
<span class= "link" >ddd</span>
</a>
</li>
</ul>

When you click on BBB, only the AAA font will turn red and CCC will not.

When you click DDD, only the CCC font will turn red and AAA will not.

。。。

Proficient in CSS reading notes