Home > Developer > Web Develop
I. Pseudo-Element selectors
1. E:first-letter/e::first-letter (CSS3 age two colons) sets the style of the first character within the element.
For example:
p::first-letter{font-size:50px;}2. E:first-line/e::first-line sets the style of the first row within the element.
For example:
P::first-line{color:green;}3. E:before/e::before inserts the content before the contents of each E element. Used in conjunction with the content property.
For example:
a::before{
Content: "click";
Color:green;
}4. E:after/e::after inserts content after the contents of each E element. Used in conjunction with the content property.
For example:
a::after{
Content: "Verse";
color:red;
}a::after{
Content:url (images/4.jpg);
color:red;
}CSS3 added:
5. E::selection sets the color of the object when it is selected.
For example:
p::selection{background:red;}Test2.html:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Title</title>
<link rel= "stylesheet" href= "Style2.css" type= "Text/css" >
<body>
<p>
Jin ——— li Shangyin <br><br>
The 50-chord, one-chord-one-pillar-si-hua year. <br><br>
Butterfly Dream Fan Butterfly, hope Emperor hath the cuckoo. <br><br>
The Pearl of the Sea Moon has tears, Lantian day warm jade smoke. <br><br>
Is this a remembrance? It was only then that it was disconsolate. <br><br>
</p>
<a href= "" > Search </a><br>
</body>STYLE2.CSS:
p::first-letter{font-size:50px;}
P::first-line{color:green;}
a::before{
Content: "click";
Color:green;
}
a::after{
Content:url (images/4.jpg);
color:red;
}
p::selection{background:red;}Two. Pseudo-class selectors
1. Structure pseudo-Class selector
1) E:first-child The first child element of the parent element, E.
For example:
li:first-child{background:red;}ul>li:first-child{color:red;}td:first-child{color:red;}CSS3 added:
2): Root selects the root element of the document.
For example:
: root{background:red;}3) E:last-child The last child element E.
For example:
td:last-child{color:red;} The last element of the TD's parent element4) E:only-child only one of the child elements E.
For example:
li:only-child{color:red;} There is only one li in the parent element of Li5) E:only-of-type has only one type of child element.
For example:
P:only-of-type{color:green;} There is only one type of child element in the parent element of P6) E:nth-child (n) matches the nth child element E of the parent element.
Values can be used directly: for example, 2
can use an odd number (odd) even (even)
You can use the formula 3n
For example:
Tr:nth-child (2) {color:red;}7) E-nth-last-child (n) matches the reciprocal nth element E of the parent element.
For example:
Tr:nth-last-child (2) {color:red;}Tr:nth-last-child (odd) {color:red;}Tr:nth-last-child (even) {color:red;}Tr:nth-last-child (3n-1) {color:red;}8) E:first-of-type matches the first sibling element E in the same type.
For example:
p:first-of-type{color:red;} The first of the P elements in the same level, the first of several p under the same parent element9) E:last-of-type matches the last sibling element E in the same type.
For example:
P:last-of-type{color:green;}E:nth-of-type (n) matches the nth sibling element E in the same type.
For example:
P:nth-of-type (2) {Color:green;}One) E:nth-last-of-type (n) matches the reciprocal nth sibling element E in the same type.
For example:
P:nth-last-of-type (2) {color:red;}E:empty matches the element E without any child elements, including the text node.
For example:
DIV:EMPTY{BORDER:1PX solid; width:300px;height:200px; No content in}//divTest2.html:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Title</title>
<link rel= "stylesheet" href= "Style2.css" type= "Text/css" >
<body>
<ul>
<li> I am a sub-element of UL 1</li>
<li> I am a sub-element of UL 2
<ol>
<li> I am the sun element of UL 1</li>
<li> I am the sun element of UL 2</li>
<li> I am the sun element of UL 3</li>
<li> I am the sun element of UL 4</li>
<li> I am the sun element of UL 5</li>
</ol>
</li>
<li> I am a sub-element of UL 3
<ul> I have only one child element
<li> I am the content of the LI element </li>
</ul>
</li>
<li> I am a sub-element of UL 4</li>
</ul><div>
<p> I was paragraph p1</p>
<p> I was paragraph p2</p>
<p> I was paragraph p3</p>
<p> I was paragraph p4</p>
<p> I was paragraph p5</p>
<p> I was paragraph p6</p>
<p> I was paragraph p7</p>
<p> I was paragraph p8</p>
</div>
<div id= "Div3" ></div>
<div>
<p>
Jin ——— li Shangyin <br><br>
The 50-chord, one-chord-one-pillar-si-hua year. <br><br>
Butterfly Dream Fan Butterfly, hope Emperor hath the cuckoo. <br><br>
The Pearl of the Sea Moon has tears, Lantian day warm jade smoke. <br><br>
Is this a remembrance? It was only then that it was disconsolate. <br><br>
</p>
<a href= "" > Search </a><br>
</div>
<table style= "width:400px;height:80px;padding:15px" >
<tr><td> cells </td><td> cells </td><td> cells </td><td> cells </td>< /tr>
<tr><td> cells </td><td> cells </td><td> cells </td><td> cells </td>< /tr>
<tr><td> cells </td><td> cells </td><td> cells </td><td> cells </td>< /tr>
<tr><td> cells </td><td> cells </td><td> cells </td><td> cells </td>< /tr>
<tr><td> cells </td><td> cells </td><td> cells </td><td> cells </td>< /tr>
<tr><td> cells </td><td> cells </td><td> cells </td><td> cells </td>< /tr>
<tr><td> cells </td><td> cells </td><td> cells </td><td> cells </td>< /tr>
<tr><td> cells </td><td> cells </td><td> cells </td><td> cells </td>< /tr>
</table>
<a href= "#" > Search </a><br>
<br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> <br><br><br>
<br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> <br><br><br>
<br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br> <br><br><br>
</body>STYLE2.CSS:
/*:root{background:red;} */
/*li:first-child{background:red;} */
/*ul>li:first-child{color:red;} */
/*p:first-child{color:red;} */
/*td:last-child{color:red;} */
/*li:only-child{color:red;} */
/*p:only-of-type{color:green;} */
/*tr:nth-child (2) {color:red;} */
/*tr:nth-last-child (3n-1) {color:red;} */
/*p:first-of-type{color:red;} */
/*p:last-of-type{color:green;} */
/*p:nth-of-type (2) {Color:green;} */
/*p:nth-last-of-type (2) {color:red;} */
DIV:EMPTY{BORDER:1PX solid; width:300px;height:200px; }2.UI pseudo-class selector and other selectors
E:active adds a style to the element being activated.
For example:
A:active{background:green;}//When the mouse is clicked, it is activeE:hover adds a style to an element when the mouse hovers over the element.
For example:
a:hover{color:red;}E:link adds a style to a link that has not been visited.
For example:
A:link{color:lightseagreen;}E:visited adds a style to the link that has been visited.
For example:
A:visited{color:yellow;}E:focus adds a style to the element that has keyboard input focus.
For example:
Input:focus{background:yellow;}E:lang adding a style to an element with the specified lang attribute
For example:
P:lang (en) {color:red;}CSS3 added:
input:checked selects each input element that is selected.
For example:
input:checked{width:50px; height:60px;} Add a style when you are selectedInput:disabled Select each of the disabled input elements.
For example:
Input:disabled{background:gray;} To change the form to a disabledInput:enabled Select each enabled INPUT element.
For example:
Input:enabled{background:green;}#E: Target selects the currently active anchor element.
For example:
<style type= "Text/css" >
A:target{color:green;}
</style>: Not (e) selects every element except the e element.
For example:
: not (input) {color:yellow;}Text2.html:
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>Title</title>
<link rel= "stylesheet" href= "Style2.css" type= "Text/css" >
<style type= "Text/css" >
A:target{color:green;}
</style>
<body>
<a href= "http://www.t" target= "_blank" >51 self-study net </a>
<fieldset>
<legend> Registered Users </legend>
<p lang= "en" >
<input type= "text" name= "user" id= "user" placeholder= "account" required= "" >
<label for= "User" > Account </label>
</p>
<p>
<input type= "password" name= "password" id= "password" placeholder= "password" >
<label for= "password" > Password </label>
</p>
<p>
<label for= "TEL" > Phone number </label>
<input type= "Tel" disabled= "" name= "Tel" id= "tel" placeholder= "Phone" >
</p>
<p>
<label for= "Email" > Email </label>
<input type= "Email" name= "email" id= "email" placeholder= "e-mail" >
</p>
<p>
<input type= "Radio" name= "FWTK" value= "" ><span> agree to the terms of service:</span><br>
<input type= "Radio" name= "FWTK" value= "" ><span> do not agree to the terms of service:</span><br>
<a href= "" > Read Terms of Service </a>
</p>
<button type= "Submit" value= "register" title= "join Member" > Registered user </button>
</fieldset>
<a href= "#" > Baidu </a>
</body>STYLE2.CSS:
/*a:active{background:green;} */
/*a:hover{color:red;} */
/*a:visited{color:yellow;} */
/*a:link{color:lightseagreen;} */
/*p:lang (en) {color:red;} */
/*input:checked{width:50px; height:60px;} */
/*input:enabled{background:green;} */
/*input:focus{background:yellow;} */
/*input:disabled{background:gray;} */
: not (input) {color:yellow;}Other Notes:
The placeholder property provides a hint that describes the expected value of an input field (hint).
The hint appears when the input field is empty and disappears when the field gets focus.
The placeholder property applies to the following <input> types: Text,search,url,telephone,email and password.
CSS selector 2--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
