:nth selector
This selector can achieve precise matching of elements, mainly including:
:fist-child :last-child :nth-child() :nth-last-child() :nth-of-type() :nth-last-of-type() :first-of-type :last-of-type :only-child :only-of-type :empty
:first-child selects the first child element of an element; :last-child selects the last element of an element A child element; :nth-child() selects one or more specific child elements of an element; :nth-last-child() selects one or more specific child elements of an element, starting from Counting starts from the last child element; :nth-of-type() selects the specified element; :nth-last-of-type() selects the specified element and starts counting from the last element; :first-of-type selects The first child element of the same type under a parent element; :last-of-type selects the last child element of the same type under a parent element; :only-child selects the element that is the only element of its parent element; :only- of-type selects an element that is the only child element of the same type as its parent element; :empty selects an element with no content in it.
1, :first-child
.demo li:first-child {background: green; border: 1px dotted blue;}.demo li.first {background: green; border: 1px dotted blue;}
2, :last-child
.demo li:last-child {background: green; border: 2px dotted blue;}
.demo li.last {background: green; border: 2px dotted blue;}
3, :nth-child()
:nth-child(length);/*参数是具体数字*/
:nth-child(n);/*参数是n,n从0开始计算*/
:nth-child(n*length)/*n的倍数选择，n从0开始算*/
:nth-child(n+length);/*选择大于length后面的元素*/
:nth-child(-n+length)/*选择小于length前面的元素*/
:nth-child(n*length+1);/*表示隔几选一*/
//上面length为整数
.demo li:nth-child(3) {background: lime;}
This kind of inequality cannot refer to negative values, that is to say, li:nth-child(-3) is not Correct usage.
:nth-child(2n), this method is a transformation of the previous one, we can choose 2 multiples of n, of course "2" can be replaced with the number you need. demo li:nth-child(2n) {background: lime;}
Equivalent to .demo
li:nth-child(even) {background: lime;}:nth-child(-n+5) This selector selects the
before the 5th n=0 --》 -n+5=5 --》 The 5th li
n=1 was selected --》 -n+5=4 --》 The 4th li
n=2 was selected --》 -n+5=3 --》 Selected The third li
n=3 ---》 -n+5=2 --》 The second li
n=4 is selected --》 -n+5=1 --》 The first one is selected li
n=5 －－》 -n+5=0 ——》 No element selected
4, :nth-last-child()
.demo li:nth-last-child(4) {background: lime;} 
5. :nth-of-type
:nth-of-type is similar to :nth-child, except that it only counts the element specified in the selector
6. :nth-last-of-type
Needless to say, everyone can imagine this selector. It is used in the same way as the previous:nth-last-child, but it is pointed. Depending on the type of element.
7. :first-of-type and :last-of-type
: The two selectors: first-of-type and :last-of-type are similar to: first The difference between -child and :last-child; is that the type of element is specified.
8, :only-child and :only-of-type
":only-child" means that an element is the only child element of its parent element.
9、:empty
:empty is used to select elements without any content. No content here means no content at all, even a space. For example, you have three paragraphs, one of which has nothing and is completely empty. , you want this p not to display
