1. 常用的选择器 1. 元素选择器
作用：通过元素选择器可以选择指定的元素
语法：tag{}
p{ color: red; } h1{ color: red; } 2. id 选择器作用：通过元素的id属性值选中唯一的一个元素
用法: #id{}
#p1{ font-size: 20px; } 3.类选择器通过元素的class属性值选中一组元素
语法：.class{}
.p2{ color: red; } .hello{ font-size: 50px; } 4. 选择器分组通过选择器分组可以同时选中多个选择器对应的元素,简单来说就是同时为这些选择的元素应用相同的样式。他也称作为 并集选择器 就是上面的每一个逗号分开的相当于一个集合，那么相当于把他们合并起来到一个集合中只要元素命中其中一条规则就会应用样式。
语法：选择器1,选择器2,选择器N{}
#p1 , .p2 , h1{ background-color: yellow; } 5. 通配选择器_ _他可以用来选中页面中的所有的元素
语法：*{}
*{ color: red; } 6. 交集选择器作用：选择同时满足所有选择器规则的元素，所以也称作为交集选择器，元素必须命中所有的选择条件才能应用样式。下面的例子就相当于必须满足元素名为span并且拥有p3这个类
语法：选择器1选择器2选择器N{}
span.p3{ background-color: yellow; } 7. 后代选择器作用：选中指定元素的指定后代元素，下面的例子就是选择id为d1的span后代，注意后代是不用和祖先元素相邻。
语法：祖先元素 后代元素{}
#d1 span{ color: greenyellow; } 8. 子选择器作用：选中指定父元素的指定子元素,两者必须是相邻的
语法：父元素 > 子元素
div > span{ background-color: yellow; }Tips:
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：拥有相同父元素的元素叫做兄弟元素
伪类专门用来表示元素的一种的特殊的状态，比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框
当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
浏览器是通过历史记录来判断一个链接是否访问过,由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
3. :hover伪类表示鼠标移入 4. :active表示的是超链接被点击的状态 5.:focus 光标为获得焦点 6.::selection选中的内容这个伪类在火狐中需要采用另一种方式编写::-moz-selection兼容火狐的
p::-moz-selection{background-color: orange;}兼容大部分浏览器的
p::selection{background-color: orange;} 10. 伪元素选择器使用伪元素来表示元素中的一些特殊的位置.
1. :first-letter 内容中的第一个字母 2. :first-line内容的第一行 3.:before表示元素最前边的部分 4. :after表示元素的最后边的部分一般before和after都需要结合content这个样式一起使用， 通过content可以向before或after的位置添加一些内容
:after
作用：可以根据元素中的属性或属性值来选取指定元素
语法：
[属性名] 选取含有指定属性的元素
[属性名="属性值"] 选取含有指定属性值的元素
[属性名^="属性值"] 选取属性值以指定内容开头的元素
[属性名$="属性值"] 选取属性值以指定内容结尾的元素
12. 子元素选择器 1. :first-child 可以选中第一个子元素: 2.last-child 可以选中最后一个子元素 body > p:first-child{background-color: yellow;}p:last-child{background-color: yellow;} 3. :nth-child 可以选中任意位置的子元素该选择器后边可以指定一个参数，指定要选中第几个子元素
even 表示偶数位置的子元素
odd 表示奇数位置的子元素
:first-of-type,:last-of-type，:nth-of-type,:first-child这些非常的类似，只不过child，是在所有的子元素中排列而type，是在当前类型的子元素中排列
p:first-of-type{background-color: yellow;} 13.兄弟选择器为挨着的兄弟元素添加样式，其中 + 表示后一个，而 ~ 则表示前一个
span ~ p{ background-color: yellow; } span + p{ background-color: yellow; } 2. 样式继承像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承,利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承 边框相关的样式 定位相关的
3. 样式优先级优先级的规则：
内联样式 ， 优先级 1000
id选择器，优先级 100
类和伪类， 优先级 10
元素选择器，优先级 1
通配* ， 优先级 0
继承的样式，没有优先级
并集选择器的优先级是单独计算