Share common selectors in CSS3 using sample grooming

1. Root selector: root

: root{} is equivalent to html{}, in general, recommended: root{}.

<style>   : root {     background:green;   }   </style>   <p>:root Selector Demo </p>

2. Negative selector: not
The negative selector, which is beyond the

<style>   input:not ([type= "submit"]) {       border:1px solid red;   }   </style>   <form action= "#" >       <p>           <label for= "name" > account:</label>           < Input type= "text" name= "name" id= "name" placeholder= "please fill in account"/>       </p>       <p>           <label for= " Password "> Password:</label>           <input type=" password "name=" password "id=" password "placeholder=" please fill in the password "/ >       </p>       <p>           <input type= "Submit" value= "Submit"/>       </p>   </ Form>

3. Null selector: Empty
Note: Empty is only valid for elements that do not have a single point, even if there is a space.

<style>   p:empty {       border:1px solid green;   }   </style>   <p> I have content here </p>   <p> <!--I have a space here--></p>   <p>< /p><!--I don't have any content here.

4. Destination selector: Target
hyperlink address, corresponding to ID

<style>   . not_show{       display:none;   }   #test: target{       display:block;   }   </style>   
5. First and last child element: First-child:last-child

<style>   ul li:first-child a {       color:green;   }   UL Li:last-child a {       color:red;   }   </style>   <ul>     <li><a href= "# #" >Link1</a></li>     <li><a href= "# #" >Link2</a></li>     <li><a href= "# #" >Link3</a></li>     < Li><a href= "# #" >Link4</a></li>     <li><a href= "# #" >Link5</a></li>   </ul>


6. Specify child element selector/Parity selector: Nth-child (n): Nth-last-child (N)

<style>/*2n even */ul li:nth-child (2n) {color:green;    }/* With the keyword odd, indicating even, the effect of UL Li:nth-child (odd) {color:green;       } *//*2n+1 odd */ul Li:nth-child (2n+1) {color:red;    }/* Use keyword even, mean odd, effect ditto ul Li:nth-child (even) {color:red;       }/* Specify child element Index */ul Li:nth-child (5) {background: #08c;       }/* Bottom fifth */ul Li:nth-last-child (5) {background:yellow; } </style> <ul> <li>item1</li> <li>item2</li> <li>item3< ;/li> <li>item4</li> <li>item5</li> <li>item6</li> <LI&G t;item7</li> <li>item8</li> <li>item9</li> <li>item10</li> & Lt;/ul> 

7. The first child element with the last matching type First-of-type Last-of-type

<style>       . Wrapper > P:first-of-type {           background:green;       }       . Wrapper > P:last-of-type {           background:orange;       }   </style>   <p class= "wrapper" >       <p> I am a block element, I am. Wrapper's first child element </p>       <p> I am a paragraph element, I am not. Wrapper's first child element, but his first paragraph element </p>       <p> I am a paragraph element </p>       <p> I am a block element </ P>   </p>
8. Specify the match type child element selector/Match type parity selector: Nth-of-type (n): Nth-last-of-type (N)

<style>       . Wrapper > P:nth-of-type (2n) {           background:orange;       }   </style>   <p class= "wrapper" >       <p> I am a P element </p>       <p> I am a paragraph element </p>       <p> I am a P element </p>       <p> I am a paragraph </p>       <p> I am a P element </p>       <p> I am a paragraph </p>       <p> I am a P element </p>       <p> I am a paragraph </p>       <p> I am a P element </p >       <p> I'm a paragraph </p>       <p> I'm a P element </p>       <p> I'm a paragraph </p>       <p > I was a P element </p>       <p> I was a paragraph </p>       <p> I was a P element </p>       <p> I was a paragraph </ P>   </p>


9. Unique child element Selector Only-child
There is only one child element in the parent element of the matching element, and it is a unique child element

<style>       . Post P:only-child {         background:orange;       }   </style>   <p class= "POST" >       <p> I am a paragraph </p>       <p> I am a paragraph </p>   </ p>   <p class= "POST" >       <p> I'm a paragraph </p>   </p>


10. Child elements of the only matching type Only-of-type

<style>       . Wrapper > P:only-of-type {           background:orange;       }   </style>   <p class= "wrapper" >       <p> I'm a paragraph </p>       <p> I'm a paragraph </p>       <p> I am a paragraph </p>       <p> I am a P element </p>   </p>   <p class= "wrapper" >       <p> I am a p</p>       <ul>           <li> I am a list item </li>       </ul>       <p > I am a paragraph </p>   </p>


11. Available Selectors: Enabled

<style>       p{           margin:20px;       }       Input[type= "Text"]:enabled {           background: #ccc;           border:2px solid red;       }   </style>   <form action= "#" >       <p>           <label for= "name" >text input:</label>           <input type= "text" name= "name" id= "name" placeholder= "Available input box"  />       </p>       <p>           <label for= "name" >text input:</label>           <input type= "Text" name= "name" id= "name" placeholder = "Disable input box"  disabled= "disabled"/>       </p>   </form>




12. Not Available selectors:d isabled

<style>   Form {       margin:50px;   }   p {       margin-bottom:20px;   }   Input {       background: #fff;       padding:10px;       border:1px solid Orange;       border-radius:3px;   }   Input[type= "text"]:d isabled {       Background:rgba (0,0,0,.15);       border:1px solid Rgba (0,0,0,.15);       Color:rgba (0,0,0,.15);   }   </style>   <form action= "#" >       <p>           <input type= "text" name= "name" id= "name" Placeholder= "I am available input box"/>       </p>       <p>           <input type= "text" name= "name" id= "name" Placeholder= "I am not available input box" disabled/>       </p>   </form>


13. Selected selector: checked

<style> form {border:1px solid #ccc;         padding:20px;         width:300px;       margin:30px Auto;       }. wrapper {margin-bottom:10px;         }. box {display:inline-block;         width:20px;         height:20px;         margin-right:10px;         position:relative;         BORDER:2PX solid Orange;       Vertical-align:middle;         }. Box input {opacity:0;         Positon:absolute;         top:0;       left:0;         }. box span {position:absolute;         Top: -10px;         rightright:3px;         font-size:30px;         Font-weight:bold;         font-family:arial;         -webkit-transform:rotate (30DEG);         Transform:rotate (30DEG);       Color:orange;       } input[type= "checkbox"] + span {opacity:0;       } input[type= "checkbox"]:checked + span {opacity:1; } </style> <form action= "#" > <p class= "WrappEr "> <p class=" box "> <input type=" checkbox "checked=" Checked "id=" Usename "/><span >√</span> </p> <lable for= "Usename" > I am selected </lable> </p> & Lt;p class= "wrapper" > <p class= "box" > <input type= "checkbox" id= "Usepwd"/><span& gt;√</span> </p> <label for= "Usepwd" > I am unchecked </label> </p> </f Orm>


14. Selected by mouse, highlight selector:: Selection

<style>   ::-moz-selection {       background:red;       Color:green;   }   :: selection {       background:red;       Color:green;   }   </style>   <p> Take the mouse to select me, try!</p>


15. Read-only selector: read-only

<style>   Form {       width:300px;       padding:10px;       border:1px solid #ccc;       margin:50px auto;   }   Form > P {       margin-bottom:10px;   }   Input[type= "text"]{       border:1px solid orange;       padding:5px;       Background: #fff;       border-radius:5px;   }   Input[type= "text"]:-moz-read-only{       border-color: #ccc;   }   Input[type= "text"]:read-only{       border-color: #ccc;   }   </style>   <form action= "#" >       <p>           <label for= "name" > name:</label>           <input type= "text" name= "name" id= "name" placeholder= "Desert"/>       </p>       <p>           <label for = "Address" >:</label>           <input type= "text" name= "Address" id= "address" value= "Shanghai, China" ReadOnly/>       </p>   </form>


16. Non-read-only selector: Read-write

<style> form {width:300px;       padding:10px;       border:1px solid #ccc;   margin:50px Auto;   } form > P {margin-bottom:10px;       } input[type= "text"]{border:1px solid orange;       padding:5px;       Background: #fff;   border-radius:5px;   } input[type= "Text"]:-moz-read-only{Border-color: #ccc;   } input[type= "Text"]:read-only{Border-color: #ccc;   } input[type= "Text"]:-moz-read-write{Border-color: #f36;   } input[type= "Text"]:read-write{Border-color: #f36;           } </style> <form action= "#" > <p> <label for= "name" > Name:</label> <input type= "text" name= "name" id= "name" placeholder= "Desert"/> </p> <p> <label F Or= "Address" >:</label> <input type= "text" name= "Address" id= "address" placeholder= "Shanghai, China" readonly= "ReadOnly"/> </p> </form>