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 伪类示例，对指定链接设置颜色</title>
<style type="text/css" media="all">
a.dreamdu:link
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://www.php.cn">点击跳转</a></p>
<p><a class="dreamdu" href="http://www.php.cn">点击跳转</a></p>
<p><a href="http://www.php.cn">点击跳转</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 伪类示例，设置已访问链接的颜色</title>
<style type="text/css" media="all">
a:link
{
color:red;
}
a:visited
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://www.php.cn">点击跳转</a></p>
<p><a href="http://www.php.cn">点击跳转</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 伪类示例</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://www.php.cn">点击跳转</a>
<p>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</p>
<div>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</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 伪类示例</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">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</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中文网</title>
<style>
p:first-child
{
color:blue;
}
</style>
</head>
<body>
<p>这是个测试</p>
<p>这是个测试</p>
<p><b>注意:</b>对于 :first-child 工作于 IE8以及更早版本的浏览器, DOCTYPE必须已经声明.</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中文网</title>
<style>
q:lang(no)
{
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q>A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE已经声明时 IE8支持 :lang.</p>
</body>
</html>
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
