Pseudo-class (class selector pseudo)
Pseudo-class: with a tag, according to their different states, different styles. This is called "pseudo-class." Pseudo-class is represented by a colon.
For example div class belongs box, which is very clear, that belongs to the category box. But what belongs to a class? Unclear. Because of the need to see what state the user clicks, click on What is the state. So called "pseudo-class."
Pseudo-static and dynamic pseudo-classes Class
Divided into two pseudo-class selector.
(1) Static pseudo-class: only for the hyperlinks style. as follows:
Before the link, click on link:
: After being visited visited links
PS: these two styles, can only be used for hyperlinks.
(2) dynamic pseudo-classes: For all the labels are applicable style. as follows:
: Hover "hover": when the mouse over the label
: Active "activate": click on the tab, but when let go.
: Focus is upon the style of a label gets focus (for example, an input box has focus)
PS: the above three styles, can only be used for hyperlinks.
Hyperlink a label
Hyperlinks four states
a label has four pseudo-classes (i.e., corresponding to the four states), required to recite. as follows:
Before clicking a hyperlink:: link "link"
After the link has been visited:: visited "visited"
: Hover "hover": when the mouse over the label
: Active "activate": click on the tab, but when let go.
Corresponding code is as follows :( without comments)
a:link{
color:red;
}
a:visited{
color:orange;
}
a:hover{
color:green;
}
a:active{
color:black;
}
Corresponding code is as follows :( Annotated)
Before / * make a hyperlink click the red * /
a:link{
color:red;
}
After the / * Let clicking a hyperlink is green * /
a:visited{
color:orange;
}
/ * Hover, put on the label when * /
a:hover{
color:green;
}
/ * Mouse click on the link, but let go when * /
a:active{
color:black;
Remember, css, these four states must be written in a fixed order:
a:link 、a:visited 、a:hover 、a:active
If you do not follow the order, it will fail. "Love and guidelines": love hate. You must love after hate.
Hyperlinks landscaping
Q: Since a {} defines the properties of hyperlinks, and a: link {} defines the attributes before clicking the hyperlink, and that these two so what difference does it make?
A: Wuxi gynecological where good http://www.xasgfk.cn/
and a {} a: link {} distinction:
a {} defined style for all hyperlinks (including anchor)
a: link {} for all the defined style href attribute written hyperlinks (anchors not included)
Hyperlink a label when in use, is more difficult. Because this not only to a control box, but also to control its pseudo-classes.
We certainly want a label EDITORIAL, the: link,: visited,: hover,: active these pseudo-classes written on the back.
In order to achieve the above effect, the full version of the code is as follows:
Site sections
Site sections
Site sections
Site sections
Site sections
Site sections
Site sections
Site sections
Code above, we found that when we define a: link and a: visited these two pseudo-class, the same if their properties, in fact, we can write together, separated by commas like, the following excerpt:
.nav ul li a{
display: block;
width: 120px;
height: 50px;
}
/ * Two pseudo-class attributes may be 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;
}
As shown in the code above, most standard writing, is to link, visited, hover pseudo three classes to be written. But the front-end development engineer in a lot of practice, found not to write link, visited quite compatible. Wording is:
a: link, a: visited all be omitted, in short a label inside. That is, a label covering the link, visited state (provided that have the same properties). Worded 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, writing a: link, a: visited pseudo-class when the two, either simultaneously write or do not write at the same time. If a write-only property and a: link attribute, not standardized.
Dynamic pseudo-classes Examples
We had described in the first paragraph, the following three dynamic pseudo-classes for all labels are applicable.
: Hover "hover": when the mouse over the label
: Active "activate": click on the tab, but when let go.
: Focus is upon the style of a label gets focus (for example, an input box has focus)