CSS Diner

（第一次发博客）
之前关于选择器的概念有点陌生，因为 一个偶然的机会，我发现了这个页面。
我做了一天才完成，现在感觉对选择器有了基本的了解，跟大家分享一下。
小白的话，可以参考一下；
大佬的话，麻烦给我留点意见；

1、plate	//选择plate元素，元素选择器：元素名

2、bento	//跟1类似，选择bento元素，元素选择器：元素名

3、#fancy	//选择id为fancy的元素，id选择器：#id属性值

4、plate apple	//plate是apple的父元素，后代选择器：元素1 元素2

5、#fancy pickle//跟4类似，再加上3的id选择器，复合选择器：#id属性值 元素2

6、.small	//两个小苹果的id都是small，类选择器：.id属性值

7、orange.small	//id为small的元素不只是两个小橘子，所以在前面要加上元素，复合选择器：元素.id

8、bento orange.small	//属于bento后代的orange，id为small。

9、plate,bento	//同时选择plate和bento元素，选择器分组：元素1,元素2

10、*		//选择全部，通配选择器：*

11、plate *	//选择plate全部的后代元素，看4，10

12、plate+.small,plate+apple	/*父元素相同，两子元素一上一下紧跟在一起，
	兄弟选择器：上（元素名、类名、id都可以）+下（元素名、类名、id都可以）
		要确实指向某两个相邻的元素*/

13、bento~pickle	//选择bento到pickle间的同级元素，开头不算结尾算：上同级元素~下同级元素

14、plate>apple		//plate是apple的父元素，跟4相似，后代选择器第二种：元素1>元素2

15、plate orange:first-child	//plate为父元素，选中orange的第一个同级元素

16、plate>apple,plate>pickle	//这一题实在没头绪，只能使用之前的后代选择器

17、.small:last-child	//属于同级元素最后一个元素：元素名或类名或id:last-child

18、plate:nth-child(3)	//同级元素第三个plate：元素名或类名或id:nth-child

19、bento:nth-last-child(3)	//跟18类似：元素名或类名或id:nth-last-child

20、apple:first-of-type		//选择第一个apple元素：元素名:first-of-type

21、plate:nth-of-type(even)	//选择第偶数个元素：元素名:nth-of-type(even)
							//奇数的话，把even换为obb

22、plate:nth-of-type(2n+3)	//从第三个开始，两个盘子只选择第一个：元素名:nth-of-type(2n+3)
							//公式可以改

23、.small:only-of-type		//选择只包含small类元素的元素：类名:only-of-type

24、*.small:last-of-type	//选择所有元素中最后一个small类元素，*号可以换成某一特指元素

25、bento:empty		//选择空的bento元素：元素名:empty

26、apple:not(.small)	//选择不包含small类名的apple

27、[for]	//选择具有for属性的元素：[属性名]

28、plate[for]	//选择具有for属性的plate元素：元素名[属性名]

29、[for = "Vitaly"]	//选择属性值为Vitaly的for属性的元素：[属性 = "属性值"]

30、[for ^= "Sa"]	//选择属性值以Sa开头的for属性的元素：[属性 ^= "属性值开头"]

31、[for $= "ato"]	//选择属性值以ato结尾的for属性的元素：[属性 $= "属性值结尾"]

32、[for *= "bb"]	//选择属性值含有bb的for属性的元素：[属性 *= "属性值部分"]

PS：这个css diner在网上可以直接查到

本人程序小白一个，如果有不足之处，还请各位大佬指出。

最后，麻烦帮忙把16题看看，怎么按照里边的方法来

还有，可以的话，给我点建议，我打算自学成为前端开发者，HTML，css，JavaScript基础学完之后应该怎么继续提高自身能力？