1.类和ID选择器的区别
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 以空格分隔的词列表）
2.属性选择器：[属性]
根据一个或者多个属性元素来选择，h1[class]{color:red;} a[class] [title]{color:red;}
根据具体属性值来选择，a[class="a1"]{color:red;}
根据部分属性值来选择。p[class~="title"]{color:red;}表示p标签的class中只要包含title就使颜色变成红色。"~="能用于任何属性。
子串匹配属性选择器：
[foo^="bar"]选择foo属性值以“bar”开头的所以元素
[foo$="bar"]选择foo属性值以“bar”结尾的所以元素(当结尾为数字时，需要在数字前加/)
[foo*="bar"]选择foo属性值包含子串“bar”的所以元素
特定属性选择器：例：*[lang|="en"]{color="blue";}这个规则会选择lang属性以en或者en-开头的所有元素。这种属性选择器最常见的用途是匹配语言值。
3. * 子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。
*包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
*要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以用相邻兄弟结合符（adjacentsibling combinator），这表示为一个加号（+）。
例：h1 +p {margin-top:0px;}选择紧接在一个h1元素后出现的所以段落，h1 要和p元素有共同的父元素。
4.伪类选择器：
链接伪类：静态：
：link 未访问的地址超链接 a:link{color:bule}
：visited 已访问的地址超链接 a:visited{color:red}
以上两例子等同于<body link="blue" vlink="red">
动态伪类：（可以运用到任何元素）
：focus 指示当前拥有输入焦点的元素，也就是说可以接受键盘输入或者能以某种方式激活的元素。
：hover 指示鼠标指针停留悬停的情况
：active指示被用户输入激活的元素。例鼠标点击情况。
*伪类的顺序“link-visited-focus-hover-active”
*选择第一个子元素 ：first-child
例：p:first-child {color:red;}将作为某元素第一个子元素的所有p元素设置为粗体。常见的错误是认为first-child 之类的选择器会选择p元素的第一个子元素。
*可以在同一个选择器中结合使用伪类。结合顺序并不重要，但不用把互斥的伪类放在一起。
例：a:link:hover:lang(de){color:red}或者a:hover:link:lang(de){color:red}将未点击过的语言为德语的超链接鼠标悬停时的颜色变为红色。
5.伪元素选择器 伪元素都必须放在出现该伪元素选择器的最后面
*设置首字母样式 :first-letter
*设置第一行样式 ：first-line
*设置之前和之后的样式 ：before ：after
6.可以兼容所有浏鉴器的“伪类选择符”就是 a 标签（伪类选择符有很多，尤其是 css3 中，但是不能兼容所有浏览器），例如 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
7.当使用:root伪类选择器为页面填充背景颜色同时使用body选择器也为页面填充背景颜色时，其效果为：body填充的背景只限于其内容大小，剩下的部分都由root填充。