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:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :link 偽類(lèi)示例，對(duì)指定鏈接設(shè)置顏色</title>
<style type="text/css" media="all">
a.dreamdu:link
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
<p><a class="dreamdu" href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
<p><a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
</body>
</html>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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :visited 偽類(lèi)示例，設(shè)置已訪問(wèn)鏈接的顏色</title>
<style type="text/css" media="all">
a:link
{
color:red;
}
a:visited
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
<p><a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a></p>
</body>
</html> 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :hover 偽類(lèi)示例</title>
<style type="text/css" media="all">
a:hover
{
color:yellow;
background:blue;
font-size:small;
}
p:hover
{
color:yellow;
background:blue;
font-size:large;
}
div:hover
{
color:red;
background:lime;
font-size:small;
}
</style>
</head>
<body>
<a href="http://ipnx.cn">點(diǎn)擊跳轉(zhuǎn)</a>
<p>IE6、IE7(Q)、IE8(Q)不支持除了連接之外元素的hover偽類(lèi)</p>
<div>IE6、IE7(Q)、IE8(Q)不支持除了連接之外元素的hover偽類(lèi)</div>
</body>
</html>anchor pseudo-class
In browsers that support CSS In the browser, different states of the link can be displayed in different ways
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :anchor 偽類(lèi)示例</title>
<style>
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
</style>
</head>
<body>
<p><b><a href="#" target="_blank">這是一個(gè)鏈接</a></b></p>
<p><b>注意：</b> a:hover 必須在 a:link 和 a:visited 之后，需要嚴(yán)格按順序才能看到效果。</p>
<p><b>注意：</b> a:active 必須在 a:hover 之后。</p>
</body>
</html>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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)</title>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>這是個(gè)測(cè)試</p>
<p>這是個(gè)測(cè)試</p>
<p><b>注意:</b>對(duì)于 :first-child 工作于 IE8以及更早版本的瀏覽器, DOCTYPE必須已經(jīng)聲明.</p>
</body>
</html>CSS :lang pseudo-class
: The lang pseudo-class gives you the ability to define special rules for different languages
Note: IE8 must declare <!DOCTYPE> to support the ;lang pseudo-class.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)</title>
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q>A quote in a paragraph</q> Some text.</p>
<p>在這個(gè)例子中,:lang定義了q元素的值為lang =“no”</p>
<p><b>注意:</b> 僅當(dāng) !DOCTYPE已經(jīng)聲明時(shí) IE8支持 :lang.</p>
</body>
</html>
