CSS Tutorial (c) Pseudo-class--Dynamic Link

Pseudo-classes can be seen as a special class selector, a special selector that can be automatically recognized by browsers that support CSS. Its greatest use is the ability to define different style effects for links in different states.

1. Syntax

The syntax of a pseudo-class is to add a pseudo-Class (Pseudo-class) to the original syntax:
Selector:pseudo-class {Property:value}
(Selector: Pseudo-Class {property: Value})
Pseudo-classes and classes are different, CSS is already defined, not like the class selector as arbitrary with other names, according to the above syntax can be interpreted as an object (selector) in a particular state (pseudo-Class) style.

Class selectors and other selectors can also be mixed with pseudo-classes:
Selector.class:pseudo-class {Property:value}
(Selector. Class: Pseudo-class {attribute: value})

2. Pseudo-Class of anchors

Our most common use is the pseudo-class of 4 A (anchor) elements, which represent dynamic links in 4 different states: link, visited, active, hover (links not visited, visited links, activation links, and mouse hover over links). We define different effects for each of them:
a:link {color: #FF0000; text-decoration:none}/* Link not visited */
a:visited {color: #00FF00; Text-decoration:none}/* Visited link */
a:hover {color: #FF00FF; text-decoration:underline}/* Mouse on link */
a:active {color: #0000FF; text-decoration:underline}/* Activate link */
(In this example, the link is not accessed when the color is red and no underline, after access is green and no underline, when the link is activated blue and underlined, the mouse on the link is purple and underlined)
Note: Sometimes this link has an effect when the mouse points to the link, and when the link is accessed, the mouse points to the link again without effect. This is because you put the a:hover in front of the a:visited, so that because of the high priority behind, when the link is accessed after ignoring the effect of a:hover. So according to the stacking order, when we define these link styles, we must write according to the order of A:link, a:visited, A:hover, a:actived.

3. Pseudo class and Class selector

By combining pseudo classes and classes, you can do a couple of different link effects on the same page, for example, we define a group of links to be red, blue after access, and green for the other, and yellow after access:
A.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
A.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
It is now applied on different links:
<a class= "Red" href= "..." > This is the first set of links </a>
<a class= "Blue" href= "..." > This is the second set of links </a>

4. Other pseudo-classes

CSS2 also defines pseudo-classes for the first and first lines (First-letter and First-line), which can have different styles for the first or first lines of an element.
In this example, we define the text in the paragraph mark to be 3 times times the default size of the first word:
<style type= "Text/css" >
P:first-letter {font-size:300%}
</style>
......
<p>
This is a paragraph, the first word of this paragraph is enlarged.
</p>

Let's define an example of a first line style:
<style type= "Text/css" >
P:first-line {color:red}
</style>
......
<p>
<p>
This is the first line of the paragraph
This is the second line of the paragraph
This is the third line of the paragraph
</p>
</p>
(The first behavior of the paragraph in the above example is red, the second to third behavior is the default color)

Note: The pseudo-class for the first and first lines requires more than IE5.5 version support.