Home > Developer > Web Develop
The pseudo-class is defined by a colon, which defines the state of the element, such as click-to-Press, click-to-Finish, and so on. We've all been working directly with the element's style before.
You can now change the style of the element's state to make the element appear more "dynamic".
Pseudo-Class selectors:
1.e:link
2.e:visited
3.e:hover
4.e:active
5.e:not ()
6.e:first-child
7.e:last-child
8.e:only-child
9.e:empty
10.e:checked
11.e:nth-child (N)
1.e:link
Set the style of hyperlink A when it is not accessed (specifically a tag)
a:link{color:red;} is not accessed when a color, set other elements have no effect, it and directly to a set color is different is a{color:red;}
Represents the entire style of a element, after access is not divided.
2.e:visited
Set hyperlink A In its link address a cup access outdated style (specifically a tag)
A:visited{color:yellow}
Examples of 1 and 2:
<! DOCTYPE html>
<meta charset= "UTF-8"/>
<title></title>
<style type= "Text/css" >
a:link{color:red;}
A:visited{color:yellow;}
</style>
<body>
<a href= "#" > Baidu </a>
</body>
When not clicked, the color is red and the color after the click is yellow.
3.e:hover
Set the mouse hover on the element when the style, not limited to a label, p, Li tags can also be used. Many effects can usually be accomplished by combining the transformations of the background map. Example:
<! DOCTYPE html>
<meta charset= "UTF-8"/>
<title></title>
<style type= "Text/css" >
a:link{color:red;}
A:visited{color:yellow;}
A:hover{color:blue;}
</style>
<body>
<a href= "#" > Baidu </a>
</body>
Color is blue when hovering.
4.e:active
To set the style of the element when the mouse is pressed (not limited to a label) example:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style type= "Text/css" >
UL li{
Display:inline-block;
List-style:none;
width:100px;
height:40px;
Text-align:center;
line-height:40px;
font-size:16px;
Font-family: "Microsoft Yahei";
}
UL li:hover{
Background-color: #ff4400;
Color: #FFFFFF;
}
UL Li:active{color:yellow;}
</style>
<body>
<ul>
<li> Home </li>
<li> first Page </li>
<li> second page </li>
<li> Home </li>
<li> first Page </li>
<li> second page </li>
</ul>
</body>
5.e:not (s) matches the element E that does not contain the S selector. Example:
<! DOCTYPE html>
<meta charset= "UTF-8"/>
<title></title>
<style type= "Text/css" >
Div:not (#div2) {color:red;}
</style>
<body>
<div class= "D1" > block elements </div>
<div class= "D1" > block elements </div>
<div class= "D1" > block elements </div>
<div class= "D2 D1" > block elements </div>
<div class= "D3" id= "Div2" > block elements </div>
</body>
All but the last line is all red.
6.e:first-child (the first child element of the parent element E)
For this element to take effect, the e element must be a child of an element, the general element is a child of the body, so you can use this pseudo-class,
and the body tag is not a child element, so body:first-child{background: #ddd} is not valid.
This property means that the selected element itself is a child element and is the first of its parent element. Example:
<! DOCTYPE html>
<meta charset= "UTF-8"/>
<title></title>
<style type= "Text/css";
Li:first-child{color:red;}
/*ul Li{display:inline-block;list-style:none;} */
</style>
<body>
<ul>
<p>sdsdasd</p>
<li > list item </li>
<li> list item </li>
<li> list item </li>
<li> list item </li>
< Li> list item </li>
<li> list item </li>
</ul>
<ol>
<li> list item </li>
<li> list item </li>
<li> list item </li>
<li> list item </li>
<li> list Item </li>
<li> list items </li>
</ol>
</body>
The first list item under the ordered list is red, There is no red in the unordered list because P is not a sub-element of UL, and Li is not the first.
The
7.e:last-child the last child element of the parent element, E. Example:
<! DOCTYPE html>
<meta charset= "UTF-8"/>
<title></title>
<style type= "Text/css";
/*ul Li{display:inline-block;list-style:none;} */
Li:last-child{color:red;}
</style>
<body>
<ul>
<p>sdsdasd</p>
<li> list item </li>
<li> list item </li>
<li> list item </li>
<li> list item </li>
<li > list item </li>
<li> list item </li>
</ul>
<ol>
<li> list item </li>
<li> list item </li>
<li> list item </li>
<li> list item </li>
<li> list Item </li>
<li> list items </li>
</ol>
</body>
displays as unordered and ordered the last list is red.
The 8.e:only-child element is a unique child element when it is matched. Example:
<! DOCTYPE html>
<meta charset= "UTF-8"/>
<title></title>
<style type= "Text/css" >
ul:only-child{color:red;}
</style>
<body>
<ul>
<li> First </li>
<li> Second </li>
<li> Third </li>
<li> Fourth </li>
</ul>
</body>
This example shows that Li is all red.
The 9.e:empty:empty selector matches every element that has no child elements (including text nodes). (Don't understand?) ）
Example:
<! DOCTYPE html>
<meta charset= "UTF-8"/>
<title></title>
<style type= "Text/css" >
p:empty{background-color:red;}
</style>
<body>
<p> This is the practice paragraph </p>
<p></p>
</body>
The 10.e:checked:checked selector matches each INPUT element that has been selected (only for radio buttons and check boxes). Not available for all browsers.
Example:
<! DOCTYPE html>
<meta charset= "UTF-8"/>
<title></title>
<style type= "Text/css" >
input:checked{background:red;}
</style>
<body>
<form action= "" method= "POST" > What you Like to eat (multiple selection):
<input type= "checkbox" name= "fruit" id= "apple"/><label for= "Apple" > Apple </label>
<input type= "checkbox" name= "fruit" id= "li"/><label for= "li" > Pear </label>
<input type= "checkbox" name= "fruit" id= "banana"/><label for= "banana" > Banana </label>
</form><form action= "" method= "post" > Who do you like:
<input type= "Radio" name= "Xingbie" id= "boys"/><label for= "boy" > Male </label>
<input type= "Radio" name= "Xingbie" id= "Girl"/><label for= "Girl" > Women's </label>
</form>
</body>
In this case I clicked on the Edge Browser radio button and the color changed.
The 11.e:nth-child (n) selector matches the nth child element that belongs to its parent element, regardless of the type of the element.
n can be a number, a keyword, or a formula.
Example:
<! DOCTYPE html>
<meta charset= "UTF-8"/>
<title></title>
<style type= "Text/css" >
Li:nth-child (2) {font-size:30px; color:orange;}
</style>
<body>
<ul>
<li> Liu Yifei </li>
<li> Fan Bingbing </li>
<li> Yang Mi </li>
<li> Yuan Shanshan </li>
</ul>
</body>
This example Fan Bingbing font becomes 30 pixels, the color is orange color.
CSS pseudo-class selector
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
