1、*：通用选择器
1 * {
2 margin: 0;
3 padding: 0;
4 }
选择页面上的全部元素，通常用于清除浏览器默认样式，不推荐使用。
2、#id：id选择器
1 #id {
2 width：1200px;
3 height: 500px;
4 }
优先级别较高，id名最好唯一。
3、.class：类选择器
1 .class {
2 1200px;
3 height: 500px;
4 }
class名可以重复，可以修饰多个元素。
4、 tagName：标签选择器
1 div {
2 1200px;
3 height: 500px;
4 }
查找页面所有指定的标签
5、 selector1 selector2：后代选择器
1 div p {
2 1200px;
3 height: 500px;
4 }
例如：查找div后代所有的p标签
6、selector1 > selector2 : 子选择器
1 div > p {
2 1200px;
3 height: 500px;
4 }
例如：查找div子类所有的p标签（只能是子类）
7、 selector1 + selector2 ：相邻选择器
1 div + p {
2 1200px;
3 height: 500px;
4 }
例如：查找与div相邻的p标签
8、 selector1 ~ selector2 : 兄弟选择器
1 div ~ p {
2 color: red;
3 }
例如：查找div后面所有同级的p标签
9、 属性选择器
1 selector[title] :
1 p [id] { /*查找包含id属性的p标签*/
2 color: red;
3 }
2 selector[href="foo"]
1 a [href="www.baidu.com"] { /*查找href="www.baidu.com的a标签"*/
2 color: black;
3 }
3 selector[href^="foo"]
1 a [href ^= "http"] {/*查找href已http开头的a标签*/
2 color: black;
3 }
4 selector[href$="foo"]
1 a [href $= "rar"] {/*查找href已rar结尾的a标签*/
2 color: black;
3 }
5 selector[href*="foo"]
1 a [href *= "o"] {/*查找href包含‘o'的a标签*/
2 color: black;
3 }
6 selector[class~="foo"]
1 p [class ~= "b"] {/*class类名为b且b前面或后面有空格的p标签(空格分隔多值的标签 <div class="a b"></div>)*/
2 color: black;
3 }
7 selector[class|="foo"]
1 p [class |= "b"] {/*class类名为b且b后面有横杠的p标签(<div class="b-c"></div>)*/
2 color: black;
3 }
10、 伪性选择器
1 selector:link 平常的状态(默认)。
2 selector:visited 被点击过之后
3 selector:hover 鼠标放到连接上的时候
4 selector:active 连接被按下的时候
5 selector:checked 按钮被选中 (input[type=radio]:checked)
6 selector:before,selector:after
7 selector1:not(selector2) 取反
8 selector::first-line 选择标签下第一行
9 selector::first-letter 选择标签下第一个字
10 selector::selection 选择被选中的文字
11 selector:first-child (p:first-child)找到P，然后找P的父级 再找父级下第一个元素是P（匹配的是某父元素的第一个子元素，可以说是结构上的第一个子元素。）
12 selector:first-of-type (p:first-of-type)找到P，然后找P的父级 再找父级下第一个元素是P（匹配的是该类型的第一个，这里不再限制是第一个子元素了，只要是该类型元素的第一个就行了，当然这些元素的范围都是属于同一级的，也就是同辈的。）
13 selector:last-child (p:last-child)找到P 然后找P的父级 再找父级下最后一个元素是P
14 selector:last-of-type (p:last-of-type) 找到P 然后找P的父级 再找父级下最后一个元素是P
15 selector:nth-child(2) (li:nth-child(2)) 找到li 然后找li的父级 再找父级下第二个元素是li
16 selector:nth-of-type(2) (li:nth-of-type(2)) 找到li 然后找li的父级 再找父级下第二个元素是li
17 selector:nth-last-child(2) (li:nth-last-child(2)) 找到li 然后找li的父级 再找父级下倒数第二元素个是li
18 selector:nth-last-of-type(2) (li:nth-last-of-type(2)) 找到li 然后找li的父级 再找父级下倒数第二元素个是li
19 selector:nth-child(even) (li:nth-child(even)) 找到li的所有偶数位(2N)
20 selector:nth-last-child(even)
21 selector:nth-child(odd) (li:nth-child(odd)) 找到li的所有奇数位(2N-1 或 2n+1)
22 selector:nth-last-child(odd)
23 selector:only-child (li:only-child) 找到li是父级的唯一子元素(选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素)
24 selector:only-of-type (li:only-of-type) 表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。