CSS Tutorial (3) Pseudo Class - Dynamic Link

Pseudo class can be regarded as a special class selector, which is a special selector that can be automatically recognized by browsers that support CSS. Its greatest use is that it can define different style effects for links in different states.

1. Syntax

The syntax of pseudo-class is to add a pseudo-class (pseudo-class) to the original syntax:
selector:pseudo-class {property: value}
(Selector: Pseudo-class {Attribute: Value})
Pseudo-class is different from the class. It has been defined by CSS. You cannot use other names at will like the class selector. According to the above syntax, it can be interpreted as an object ( selector) in a special state (pseudo-class).

Class selectors and other selectors can also be mixed with pseudo-classes:
selector.class:pseudo-class {property: value}
(selector.class:pseudo-class{property: Value})

2. Pseudo-classes of anchors

The most commonly used pseudo-classes of the four a (anchor) elements are the four pseudo-classes of the a (anchor) element, which represent the four different states of the dynamic link: link, visited, active, hover (unvisited links, visited links, active links and mouseover links). We define different effects for them respectively:
a:link {color: #FF0000; text-decoration: none} /* Unvisited link*/
a:visited {color: #00FF00; text-decoration : none} /* Visited link*/
a:hover {color: #FF00FF; text-decoration: underline} /* Mouse over link*/
a:active {color: #0000FF; text -decoration: underline} /* Activate link*/
(In the above example, the color of the link is red and underlined when it is not accessed, it is green and underlined when it is accessed, and it is blue and underlined when the link is activated. , it is purple and underlined when the mouse is on the link)
Note: Sometimes it has an effect when the mouse points to the link before the link is accessed, but it has no effect when 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, because the latter one has a higher priority, the effect of a:hover will be ignored when the link is accessed. Therefore, according to the stacking order, when we define these link styles, we must write them in the order of a:link, a:visited, a:hover, and a:actived.

3. Pseudo-class and class selectors

By combining pseudo-classes and classes, you can create several sets of different link effects on the same page. For example, we define a One group link is red and blue after visiting; the other group is green and yellow after visiting:
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
Now applied on a different link:
This is the first set of links
This is the second set of links
4. Other pseudo-classes

In addition, CSS2 also defines pseudo-classes for the first word and first line (first-letter and first-line), which can be used to modify the first letter or first line of an element. Set different styles.
Look at this example below. We define the size of the first letter of text in the paragraph mark to be 3 times the default size:

......

This is a paragraph, and the first word of this paragraph is enlarged.