1、选择器：
*选择器（selector），会告诉浏览器：网页 上的哪些元素需要设置什么样的样式。
*比如：p这个选择器就表示选择页面中的所 有的p元素，在选择器之后所设置的样式会 应用到所有的p元素上
元素选择器：
*元素选择器（标签选择器），可以根据标 签的名字来从页面中选取指定的元素。
*语法： 标签名 { }
*比如p则会选中页面中的所有p标签，h1会 选中页面中的所有h1标签。
2、类选择器：
类选择器，可以根据元素的class属性值选取元素。
语法：
.className{}
比如.hello会选中页面所有class属性为hello的元素。
3、ID选择器
ID选择器，可以根据元素的id属性值选取元素。
语法：地{}
比如：#box会选中页面中的id属性值为box的元素，和class属性的不同，id属性是不能重复的。
4、复合选择器
复合选择器，可以同时使用多个选择器，这样可以先择同时满足多个选择器的元素。
语法：选择器，选择器{}
例如：div.box1会选中页面中具有box1这个class的div元素。
5、群组选择器：
群组选择器，可以同时使用多个选择器，多个选择器将同时应用指定的样式。
语法：选择器1，选择器2，选择器3{}
比如p，hello，#box会同时选中页面中p元素，class为hello的元素，id为box的元素。
6、通用选择器：*{}
[图片上传失败...(image-66683d-1533641783154)]
7、标签之间的关系：
祖先元素：直接或间接包含后代元素的元素。
后代元素：直接或间接被祖先元素包括的元素。
父亲元素：直接包含子元素的元素。
子元素：直接被父元素包含的元素。
8、兄弟元素：拥有相同父元素的元素。
9、后代选择器：后代选择器可以根据标签的关系，为处在元素内部的代元素设置样式。
语法：祖先元素，后代元素，后代元素{}
比如:p strong会选中页面中的所有中的p元素内的strong元素。
10、给链接定义样式：
正常连接：a:link
访问过的链接：a:visited
鼠标还过的链接：a:hover
鼠标点击的链接：a:active
其他：
获取焦点：fcous
指定元素前：before
指定元素后：after
远中的元素::selection
11、给段落定义样式：
首字母：first-letter
首行：first-line
12、自选择器：父选择器>子选择器
其他的子元素选择器
：first-child 选择第一个子标签
：last-child选择做后一个子标签
：not-child选择指定的子元素
：first-of-type
:last-of-type
:nth-of-type这三者对应不同的指定类型的子元素
13、兄弟选择器：兄弟元素+兄弟元素{}查找后面一个兄弟元素
查找后面的所有兄弟元素. 兄弟元素~兄弟元素{}
否定伪元素：not(选择器){}
比如p:not(.hello)表示选择所有的p元素但 是class为hello的除外。
1题 plate（元素选择器）
2题bento(元素选择器)
3题#fancy(id选择器)
4题plate apple(后代元素选择器)
5题#fancy pickle(复合选择器)
6题.small(类选择器)
7题bento .small,plate .small(并集选择器)
8题bento orange(后代元素选择器)
9题plate,bento,plate(并集选择器)
10题*（通配选择器）
11题plate*(后代元素选择器)
12题plate + apple(兄弟元素选择器)
13题bento~pickle(兄弟元素选择器)
14题plate > apple(子类元素选择器)
15题orange:first-child(子元素选择器)
16题:only-child(子元素选择器)
17题.small:last-child(子元素选择器)
18题plate:nth-child(3)(子元素选择器)
19题:nth-last-child(4)(子元素选择器)
20题apple:first-of-type(子元素选择器)
21题plate:nth-of-type(even)(子元素选择器)
22题plate:nth-of-type(2n+3)(子元素选择器)
23题apple:only-of-type(子元素选择器)
24题.small:nth-child(even)(子元素选择器)
25题bento:empty(子元素选择器)
26题apple:not(.small)(not选择器)
作者：dream_seeker
链接：https://www.jianshu.com/p/437e05ef4eb6
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
