A detailed explanation of the application techniques of CSS Special selector pseudo class

css| Tips

A pseudo class can be viewed as a special class selector, a special selector that can be automatically recognized by browsers that support CSS. Its greatest use is that you can define different style effects on links in different states.

1. Grammar

The syntax of a pseudo class is to add a pseudo class to the original syntax (Pseudo-class):
Selector:pseudo-class {Property:value}
(selector: Pseudo Class {property: Value})
Pseudo classes and classes are different, is the CSS has been defined, can not be like a 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 {property: Value})

2. Pseudo class of anchors

Our most commonly used is the pseudo class of 4 type a (anchor) elements, which represent dynamic links in 4 different states: link, visited, active, hover (unlinked links, visited links, activation links, and mouse resting on links). We define each of these different effects:

a:link {color: #FF0000; Text-decoration:none}/* not visited link/*
a:visited {color: #00FF00; Text-decoration:none}/* Visited links/*
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 without underlining, access is green without underlining, when activating the link is blue and underlined, the mouse on the link is purple and underlined)
Note: Sometimes the link before the mouse point to the link is effective, and link access after the mouse again point to the link is not effective. This is because you put a:hover in front of the a:visited, so that because of the high priority behind, when access to the link after the neglect of the a:hover effect. So according to the stacking order, when we define these link styles, we must write 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 do several different kinds of link effects on the same page, for example, we define a set of links as red, blue after access, and green for another group, and yellow after access:

A.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
A.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
Now apply to different links:

<a class= "Red" href= "..." > This is the first set of links </a>
<a class= "Blue" href= "..." > This is the second group of links </a>

4. Other pseudo-categories

In addition, the CSS2 defines the pseudo class of the first and first lines (First-letter and First-line), and you can set different styles for the first or first line of the element.
Let's look at the example below, where we define the text in the paragraph mark as the default size of 3 times times:

<style type= "Text/css" >
P:first-letter {font-size:300%}
</style>
......
<p>
This is a paragraph, and the first word of the paragraph is magnified.
</p>
Let's define an example of a first-line style:

<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>
(The first behavior of the paragraph in the previous example is red, the second to third behavior default color)

Note: The pseudo class for both the first and first lines needs to be supported by IE5.5 versions.