CSS Quick Guide (2)

3. Pseudo-category-Dynamic Link

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

1. Syntax

The pseudo-class syntax adds a pseudo class to the original Syntax ):
Selector: pseudo-class {property: Value}
(Selector: pseudo class {property: Value })
The pseudo class is different from the class. It is defined by CSS and cannot be randomly named like a class selector. According to the above syntax, it can be interpreted as an object (selector) A style in a special State (pseudo class.

Class delimiters and other delimiters can also be mixed with pseudo-classes:
Selector. Class: pseudo-class {property: Value}
(Selection operator. Class: pseudo class {attribute: Value })

2. Pseudo-Category of the anchor

We usually use pseudo classes of four A (Anchor) elements, which indicate that dynamic links are in four different states: link, visited, active, and hover (unaccessed links, accessed links, activation links, and mouse stays on the links ). We define different effects for them:
A: link {color: # ff0000; text-Decoration: None}/* unaccessed link */
A: visited {color: #00ff00; text-Decoration: None}/* accessed link */
A: hover {color: # ff00ff; text-Decoration: underline}/* move the cursor over the link */
A: active {color: # 0000ff; text-Decoration: underline}/* activation link */
(In the above example, when the link is not accessed, the color is red and there is no underline. After the link is accessed, the color is green and there is no underline. When the link is activated, the color is blue and underlined, the mouse is purple and underlined on the link)
Note: sometimes it takes effect to direct the cursor over the link before the link is accessed, but the mouse points to the link again after the link is accessed. This is because you put a: hover in front of a: visited. In this case, the access link will ignore the effect of A: hover due to the higher priority. Therefore, when defining these link styles, we must write them in 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 create several sets of different link effects on the same page. For example, we define a set of links in red and blue after access; the other group is green and the access is yellow:
A. RED: link {color: # ff0000}
A. RED: visited {color: # 0000ff}
A. Blue: link {color: #00ff00}
A. Blue: visited {color: # ff00ff}
Now the application is on different links:
<A class = "red" href = "..."> This is the first link </a>
<A class = "blue" href = "..."> This is the second link </a>

4. other pseudo classes

In addition, css2 defines the pseudo class of the first character and the first line (first-letter and first-line). You can set different styles for the first or first line of an element.
Let's take a look at this example. We define the size of the first word of the text in the paragraph mark as three times the default size:
<Style type = "text/CSS">
P: First-letter {font-size: 300%}
</Style>
......
<P>
This is a paragraph, and the first word of this paragraph is enlarged.
</P>

Let's define another example of the first line style:
<Style type = "text/CSS">
Div: first-line {color: Red}
</Style>
......
<Div>
<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>
</Div>
(In the above example, the first behavior of the paragraph is red, and the second and third actions are color by default)

Note: The pseudo-classes of the first word and the first line must be supported by ie5.5.