CSS pseudo-class

CSS pseudo-classes -- Pseudo-Classes

CSS pseudo-classes are part of the CSS selector

The pseudo-class name is case-sensitive. The sensitivity depends on the language of the document. In HTML The document is not case-sensitive, but the XML document is case-sensitive

The English name of pseudo-classes is Pseudo-Classes

The connection between styles in CSS and elements in HTML documents is usually based on the elements in the document location, this approach meets most needs. However, due to the limitations of the HTML document structure, some effects cannot be achieved, such as events triggered by certain user behaviors. Here are some examples:

When the user moves the mouse over an HTML element

Leaving HTML elements

Clicking on HTML elements

Pseudo classes can be used for document state changes, dynamic events, etc., such as the user's mouse click on an element and unvisited links

Pseudo-classes classify elements through their three characteristics: name, attributes, or content. In principle, it is a feature that cannot be obtained in HTML documents

CSS :link pseudo-class

:link -- CSS :link pseudo-class, suitable for links that have not been visited by users

Syntax: :link

CSS version: CSS1

Description:

Applies to links that have not been visited by users

User terminals (for example: browsers) usually display unvisited links and visited links differently. CSS provides the pseudo-classes :link and :visited to distinguish links in the two states

Unvisited links and visited links are mutually exclusive

link, the meaning of "link" in Chinese

Set the color of the specified link:

      
  
点击跳转
 
点击跳转
 
点击跳转
  

CSS: visited pseudo-class

Syntax: :visited

CSS version: CSS1

Reference URL: http://www.dreamdu.com/css/pseudo -class_visited/

Description:

Applies to links that have been visited by users

User terminals (for example: browsers) usually display unvisited links and visited links differently Links, CSS provides pseudo-classes: link and :visited to distinguish between two status links

Unvisited links and visited links are mutually exclusive

visited, Chinese "visited" Meaning

Grammar

:visited

a:visited

a.class:visited

Example

a:visited

{

color: green;

}

The visited link style defined above is green

The document language determines which elements are the source chain of the hyperlink. For example, in HTML, the link pseudo-class applies to a elements with href attributes. Therefore, the following two CSS declarations are equivalent

a:visited

{

color: green;

}

:visited

{

color: green;

}

Tip: For links that have been visited, the browser will record the visit Information, please clear the browser cached data before viewing the example below

      
  
点击跳转
 
点击跳转
  

CSS :hover pseudo class

is suitable for when the cursor (mouse pointer) points to an element, but this element is not Style when activated

Syntax: :hover

CSS version: CSS2

Description :

Applies to when the cursor (mouse pointer) points to an element but the element is not activated

The client (browser) can change its rendering effect according to the user's interaction with it. CSS provides three pseudo-classes for this situation: hover, active, focus

The above three pseudo-classes are not Mutually exclusive, one element can apply to several of them at the same time. The

:hover pseudo-class is applicable when the user points to an element, such as the user's mouse pointing to a paragraph p. When the user leaves the element with the mouse, the original style display of the element is restored

hover, which means "stay, hover" in Chinese

Syntax

:hover

a:hover

a.class:hover

Instance

      
  点击跳转 
IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类
 
IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类
  

anchor pseudo-class

In browsers that support CSS In the browser, different states of the link can be displayed in different ways

      
  
这是一个链接
 
注意： a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。
 
注意： a:active 必须在 a:hover 之后。
  

Note: In the CSS definition, a:hover must be placed after a:link and a:visited to be effective.

Note: In the CSS definition, a:active must be placed after a:hover to be valid.

Note: Pseudo-class names are not case-sensitive.

CSS :first-child Pseudo class

Syntax: :first-child

CSS version: CSS2

Reference URL: http://www.dreamdu.com/css/pseudo-class_first-child/

Description:

matches the first child element of other elements, for example: in a div Including multiple p elements, you can use the first-child pseudo-class to match the first p element

first, which means "first" in Chinese; child, which means "offspring, child node" in Chinese

Syntax

:first-child

E:first-child

E1>E2:first-child

Example

p > code:first-child

{

color:lime;

background:red;

}

      
  
这是个测试
 
这是个测试
 
注意:对于 :first-child 工作于 IE8以及更早版本的浏览器, DOCTYPE必须已经声明.
  

CSS :lang pseudo-class

: The lang pseudo-class gives you the ability to define special rules for different languages

Note: IE8 must declare to support the ;lang pseudo-class.

      
  
Some text A quote in a paragraph Some text.
 
在这个例子中,:lang定义了q元素的值为lang =“no”
 
注意: 仅当 !DOCTYPE已经声明时 IE8支持 :lang.