Css pseudo-class-dynamic link

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:

Copy content to clipboard

Code:

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 works when you place 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:

Copy content to clipboard

Code:

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:

Copy content to clipboard

Code:

<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 also definesFirst wordAndFirst line(First-letter and first-line) Pseudo classes, 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:

Copy content to clipboard

Code:

<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:

Copy content to clipboard

Code:

<Style type = "text/css">
Div p: 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)