CSS basics 9: pseudo classes

CSS basics 9: pseudo classes

CSS pseudo-class

The pseudo class in CSS syntax is used to add special effects to certain selectors. Common pseudo classes include:

(1) syntax

Syntax of pseudo classes:

Selector: pseudo-class {property: value}

CSS classes can also be used with pseudo classes.

Selector. class: pseudo-class {property: value}

(2) pseudo-anchor
In browsers that support CSS, different links can be displayed in different states, including activity, accessed, inaccessible, and hovering.

A: link {color: # FF0000}/* unaccessed link */a: visited {color: #00FF00}/* accessed link */a: hover {color: # FF00FF}/* move the mouse over the link */a: active {color: # 0000FF}/* selected link */

The complete code is:

 

 

This is a link.

Note:In CSS definition, a: hover must be placed after a: link and a: visited to take effect!

Note:In CS definition, a: active must be placed after a: hover to take effect!

The running result is: 1. the URL status that has never been accessed by the browser is:

2. the URL that the browser has accessed is in the following status:

3. The status of the mouse over the link is:

4. The status of the link after the mouse clicks is:

Tip: 1 in CSS definition, a: hover must be placed after a: link and a: visited.

2 In CSS definition, a: active must be placed after a: hover, which is valid.

3. the pseudo-class name is case insensitive.

(3) pseudo and CSS classes

Pseudo classes can be used with CSS classes:

A. red: visited {color: # FF0000}

CSS Syntax

If the link in the above example has been accessed, it will be displayed in red.

(4): first-child pseudo class

You can use the: first-child pseudo class to select the first child element of an element. This particular pseudo class is easily misunderstood, so it is necessary to give an example.

Ming. Consider the following tags:

 

These are the necessary steps:

• Intert Key
• Turn keyClockwise
• Push accelerator

DoNotPush the brake at the same time as the accelerator.

In the preceding example, the first element contains the first p, the first li, strong, and em elements.

Specify the following rules:

 

p:first-child {color:red;}li:first-child {color:blue;}strong:first-child {color:green;}em:first-child {color:yellow;}

The first rule sets all p elements as the first child element of an element to red. The second rule will act as an element (in HTML,

This must be an ol or ul element.) All the li elements of the first child element are blue. The third rule will act as all strong values of the first child element of an element.

The element is set to green. The first rule sets all em elements that are the first child element of an element to yellow.

Tip: The most common error is that the p: first-child selector selects the first child element of the p element.

Note: It must be declared so that first-child can take effect in IE.

The result of running the browser is:

Here are three more examples:

Example 1-match the first

Element

In the following example, the selector matches the p element as the first child element of any element:

 

Some text

Some text

The running result is:

Example 2-match all

The first one in the elementElement

In the following example, the selector matches all

The first one in the elementElement:

SomeText. SomeText.

SomeText. SomeText.

The running result is:

Example 3: match all

AllElement

In the following example, the selector matches all

AllElement:

SomeText. SomeText.

SomeText. SomeText.

The running result is:

(5): lang pseudo class

: Lang pseudo classes enable you to define special rules for different languages.

In the following example, The lang class defines the type of quotation marks for q elements whose property value is no:

 

TextReferenced text in a paragraphText

The running result is: