Pseudo class in CSS: Dynamic link

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} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */

(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. This article is from http://bianceng.cn (Getting started with programming)

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="...">这是第一组链接</a>
<a class="blue" href="...">这是第二组链接</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>
这是一个段落，这个段落的首字被放大了。
</p>

Let's define an example of a first-line style:

<style type=”text/css”>
div p:first-line {color: red}
</style>
……
<div>
<p>
这是段落的第一行
这是段落的第二行
这是段落的第三行
</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.