Home > Developer > Web Develop
This article was originally published in the blog Park and continues to update the front-end series on GitHub. Follow me on GitHub, get started and go to the advanced front.
Pseudo Class (pseudo class selector)The following is the text.
pseudo-Class : the same label, according to its different state, has different styles . This is called "Pseudo-Class". Pseudo-classes are represented by colons.
For example, Div belongs to box class, which is very clear, it belongs to box class. But what kind does a belong to? Not clear. Because you need to see what state the user clicked before, what state was clicked. Therefore, it is called "Pseudo-Class".
Pseudo-class selectors are divided into two types.
(1) static Pseudo-class : A style that can only be used for hyperlinks . As follows:
PS: The above two styles can only be used for hyperlinks.
(2) dynamic Pseudo-class : A style that applies to all tags . As follows:
PS: The above three styles can only be used for hyperlinks.
A tag has 4 pseudo-classes (that is, four states) and requires recitation. As follows:
The corresponding code is as follows: (without comment)
a:link{ color:red; } a:visited{ color:orange; } a:hover{ color:green; } a:active{ color:black; }
The corresponding code is as follows: (with comments)
/*Let the hyperlink click before it is red*/
a:link{
Color:red;
}
/*Let the hyperlink click after green*/
a:visited{
Color:orange;
}
/* Mouse over, when placed on the label */
a:hover{
Color:green;
}
/*Click on the link, but don't let go*/
a:active{
Color:black;
Remember, in CSS, these four states must be written in a fixed order :
A:lInk, a:visited, A:hover, a:active
If the order is not followed, it will be invalidated. The "Love and Hate guidelines": Loving hate. Must first love, after hate.
Take a look at the motion diagram effects of these four states:
Q: Now that youa{}have defined the properties of the hyperlink anda:link{}defined the properties before the hyperlink click, what is the difference between the two?
For:
a{}anda:link{}the difference:
Hyperlink a tag is more difficult to use when used. Because not only to control a box, but also to control its pseudo-class.
We must write the a tag in front and:link、:visited、:hover、:activewrite these pseudo-classes behind.
Let me give you an example. If the effect:
In order to achieve this effect, the full version of the code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
*{
Margin: 0;
Padding: 0;
}
.nav{
Width: 960px;
Height: 50px;
Border: 1px solid red;
Margin: 100px auto;
}
.nav ul{
/* remove the dot */
List-style: none;
}
.nav ul li{
Float: left;
Width: 120px;
Height: 50px;
/* Make content horizontally centered*/
Text-align: center;
/* Let the line height be equal to the height of nav, you can ensure that the content is centered vertically */
Line-height: 50px;
}
.nav ul li a{
Display: block;
Width: 120px;
Height: 50px;
}
/* Two pseudo-class attributes, separated by commas */
.nav ul li a:link , .nav ul li a:visited{
Text-decoration: none;
Background-color: purple;
Color:white;
}
.nav ul li a:hover{
Background-color: orange;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">Site section</a></li>
<li><a href="#">Site section</a></li>
<li><a href="#">Site section</a></li>
<li><a href="#">Site section</a></li>
<li><a href="#">Site section</a></li>
<li><a href="#">Site section</a></li>
<li><a href="#">Site section</a></li>
<li><a href="#">Site section</a></li>
</ul>
</div>
</body>
</html>
In the above code, we find that when we definea:linkand thea:visitedtwo pseudo-classes, if their properties are the same, we can actually write together, separated by commas, excerpt as follows:
.nav ul li a{ display: block; width: 120px; height: 50px; } /*两个伪类的属性，可以用逗号隔开*/ .nav ul li a:link , .nav ul li a:visited{ text-decoration: none; background-color: purple; color:white; } .nav ul li a:hover{ background-color: orange; }
As the above code shows, the most standard way to write is to link, visited, hover the three pseudo-classes are written. But the front-end development engineer in a lot of practice, found not to write link, visited is also quite compatible. The wording is:
A:link, a:visited can be omitted, abbreviated in a tag inside. In other words, the A tag covers the status of Link, visited (provided that all have the same attributes). The wording is as follows:
.nav ul li a{ display: block; width: 120px; height: 50px; text-decoration: none; background-color: purple; color:white; } .nav ul li a:hover{ background-color: orange; }
Of course, when writinga:link,a:visitedthese two pseudo-classes, either write at the same time, or do not write at the same time. If only writeaproperties anda:linkproperties, not canonical.
As we have described in the first paragraph, the following three dynamic pseudo-classes are available for all tags.
We might as well cite an example.
Example 1:
<style type="text/css">
/*
Pseudo-class selector: dynamic pseudo-class
*/
/*
When the text box gets the focus:
Border: #FF6F3D this orange
Text: Green
Background color: #6a6a6a this gray
*/
Input:focus{
Border:3px solid #FF6F3D;
Color:white;
Background-color:#6a6a6a;
}
/*
Shows blue when the mouse is over the label
*/
Label:hover{
Color:blue;
}
/*
Click the label and the mouse will be red when it is not released.
*/
Label:active{
Color:red;
}
</style>
Effect:
Using thishoverproperty, we also make a style setting for the table:
Examples of forms:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
/*The style of the entire table */
Table{
Width: 300px;
Height: 200px;
Border: 1px solid blue;
/*border-collapse attribute: Fold the line of the table*/
Border-collapse: collapse;
}
/* When hovering, let the current line display #868686 this gray*/
Table tr:hover{
Background: #868686;
}
/*The style of each cell*/
Table td{
Border:1px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Effect:
Want to learn soft skills Beyond the code ? You may wish to follow my public number: Life team (ID:vitateam).
Sweep, you will discover another new world, and it will be a beautiful surprise:
CSS selector: pseudo-Class (graphic detail)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
