【CSS总结】CSS选择器

https://www.w3school.com.cn/cssref/css_selectors.asp

CSS3选择器最新部分，有人也称这种选择器为CSS3结构类，下面我们通过实际的应用来具体了解他们的使用和区别，首先列出他具有的选择方法：

1. :first-child选择某个元素的第一个子元素；
2. :last-child选择某个元素的最后一个子元素；
3. :nth-child()选择某个元素的一个或多个特定的子元素；
4. :nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；
5. :nth-of-type()选择指定的元素；
6. :nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；
7. :first-of-type选择一个上级元素下的第一个同类子元素；
8. :last-of-type选择一个上级元素的最后一个同类子元素；
9. :only-child选择的元素是它的父元素的唯一一个了元素；
10. :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；
11. :empty选择的元素里面没有任何内容。

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;}

这种不式不能引用负值，也就是说li:nth-child(-3)是不正确的使用方法。

:nth-child(2n),这中方式是前一种的变身，我们可以选择n的2倍数，当然其中“2”可以换成你自己需要的数字

.demo li:nth-child(2n) {background: lime;}
			等于
.demo li:nth-child(even) {background: lime;}
:nth-child(-n+5)这种选择器这个是选择第5个前面的

			n=0 －－》 -n+5=5 －－》 选择了第5个li
			n=1 －－》 -n+5=4 －－》 选择了第4个li
			n=2 －－》 -n+5=3 －－》 选择了第3个li
			n=3 －－》 -n+5=2 －－》 选择了第2个li
			n=4 －－》 -n+5=1 －－》 选择了第1个li
			n=5 －－》 -n+5=0 －－》 没有选择任何元素

4、:nth-last-child()

.demo li:nth-last-child(4) {background: lime;}

5、:nth-of-type

:nth-of-type类似于:nth-child，不同的是他只计算选择器中指定的那个元素

6、:nth-last-of-type

这个选择器不用说大家都能想得到了，他和前面的:nth-last-child一样使用，只是他指一了元素的类型而以。

7、:first-of-type和:last-of-type

:first-of-type和:last-of-type这两个选择器就类似于:first-child和:last-child;不同之处就是指定了元素的类型。

8、:only-child和:only-of-type

":only-child"表示的是一个元素是它的父元素的唯一一个子元素。

9、:empty

:empty是用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格，比如说，你有三个段落，其中一个段落什么都没有，完全是空的，你想这个p不显示

否定选择器（:not）

否定选择器和jq中的:not选择器一模一样，就拿form中的元素来说明这个选择器的用法，比如你想对form中所有input加边框，但又不想submit也起变化，此时就可以使用:not为实现