Nth child selector

Selectors	describe
ul li:first-child	Choose ul The first of the parent elements li Subelement
ul li:last-child	Choose ul The last child element in the parent element
ul li:nth-child(n)	Choose ul The second of the parent elements n Sub elements
ul li:nth-child(odd)	Select the... With odd subscript li Elements
ul li:nth-child(even)	Select... With even subscript li Elements
ul li:nth-child(2n)	Select... With even subscript li Elements （n For natural Numbers The initial value is 0 successively +1 Increasing ,2n Said is 20=0 21=2 22=4 23=6 24=8 25=10 This will continue to increase ）
ul li:nth-child(3n+1)	Selected as 1 4 7 10 Subscripts in this order li Elements （n For natural Numbers The initial value is 0 successively +1 Increasing ,3n+1 Said is 30+1=1 31+1=4 3*2+1=7 This will continue to increase ）
ul li:nth-child(-n+5)	Select the first five li Elements （n For natural Numbers The initial value is 0 successively -1 Increasing ,-n+5 Said is 5+0=5 5+[-1]=4 5+[-2]=3 This will continue to increase ）
ul li:nth-child(n+5)	Select the fifth one li Elements （n For natural Numbers The initial value is 0 successively +1 Increasing ,n+5 Said is 5+0=5 5+1=6 5+2=7 This will continue to increase ）
ul li:nth-last-child(n)	Choose ul The penultimate in the parent element n Sub elements
ul li:first-of-type	Choose ul The type in the parent element is li The first element of
	ul li:last-of-type
ul li:nth-of-type(n)	Choose ul The type in the parent element is li Of the n Elements
ul li:nth-last-of-type(n)	Choose ul The type in the parent element is li The last of n Elements

notes ：nth-child: Is not a filter type , But you have to match the type selector to make it work

ul li:nth-child(1){background: #009A00;}    
/* There's one down there span So the first one is span, however span and li It doesn't work because it doesn't work */
/* Want to use :nth-child Select the first one li Have to write ul li:nth-child(2)*/

 <div id="box">
       <span></span>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
   </div>

notes ：nth-of-type(n): Filter the type first , Determine the number of elements

ul li:nth-of-type(1){background: #009A00;}     /* To filter out span after , Get the first li Elements */

<div id="box">
     <span></span>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
 </div>

nth-child: Structure pseudo class selector details ：
1. Choose ul The first of the parent elements li Subelement
ul li:first-child{background: #009A00;}

2. Choose ul The last child element in the parent element
ul li:last-child{background: #009A00;}

3. Choose ul The second of the parent elements 5 Sub elements
ul li:nth-child(5){background: #009A00;}

4. Select the... With odd subscript li Elements
ul li:nth-child(odd){background: #009A00;}

5. Select... With even subscript li Elements
ul li:nth-child(even){background: #009A00;}

6. Select the... With odd subscript li Elements
ul li:nth-child(2n-1){background: #009A00;}

7. Select... With even subscript li Elements
ul li:nth-child(2n){background: #009A00;}

8. Choose ul The penultimate in the parent element 2 Sub elements
ul li:nth-last-child(2){background: #009A00;}

9. Choose ul The type in the parent element is li The first element of
ul li:first-of-type{background: #009A00;}

10. Choose ul The type in the parent element is li Of the 5 Elements
ul li:nth-of-type(5){background: #009A00;}

CSS2 Attribute selector ：

Selectors	Example	describe
[attr]	[name]	Selected name Attribute elements
[attr=val]	[name=box]	Selected name Property whose value is box also neme There are only attribute values box The element of this one
[attr~=val]	[name~=box]	Selected name Property and its value is a list of words , contain box The value of the elements

[name]{background: #009A00;}   /*  Set the background of the selected element to green  */ 
<div id="unp">
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li  name="box"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
    </div>

design sketch :

2. Selected name Property whose value is box also neme There are only attribute values box The element of this one

[name=box]{background: #009A00;}   /*  Set the background of the selected element to green  */     
<div id="unp">
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li name="box"></li>
        <li name="box erp"></li>        /* This name There are two values , This will not be selected */
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
    </div>

design sketch ：

3. Selected name Property and its value contains box The value of the elements

[name~=box]{background: #009A00;}
 <div id="unp">
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li name="box"></li>
        <li name="box erp"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
    </div>

design sketch ：

CSS3 Attribute selector ：

Selectors	Example	describe
[attr^=val]	[class^=box]	Selected class Property and its value is in the form of box Elements at the beginning
[attr$=box]	[name$=box]	Selected class Property and its value is in the form of box Ending element
[attr*=box]	[name*=box]	Selected class Property and its value contains box The elements of
CSS3 Detailed explanation of attribute selector cases ：
1. Selected class Property and its value is in the form of box Elements at the beginning

 [class^=box]{background: #009A00;}
<div id="unp">
        <li class="box1"></li>
        <li class="box2"></li>
        <li class="box3"></li>
        <li class="box4"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
    </div>

design sketch ：

2. Selected class Property and its value is in the form of box Ending element

[class$=box]{background: #009A00;}   
<div id="unp">
        <li class="un-box"></li>
        <li class="un-box"></li>
        <li class="un-box"></li>
        <li class="un-box"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
    </div>

design sketch ：

3. Selected class Property and its value contains box The elements of

[class*=box]{background: #009A00;}
<div id="box">
        <li class="unboxp"></li>
        <li class="unboxp"></li>
        <li class="unboxp"></li>
        <li class="unboxp"></li>
        <li class="unboxp"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
        <li class="ure"></li>
    </div>

design sketch ：
Pseudo class attribute selector ：

Selectors	Example	describe
:disabled	input:disabled{ border: 2px solid red;}	Select the disabled form element
:enabled	input:enabled{ border: 2px solid red;}	Select the form element with available status
:checked	input:checked{width: 50px;height: 50px;}	Select the single and multiple check boxes in the selected status
::selection	input::selection { color: red;}	Selected elements ( Generally for text