一.选择器的种类
1. 基本选择器
#id ：根据给定的id匹配相应元素
element ：标签选择器
.class ：类选择器
* ：通配符选择器
示例：
* {
margin: 0;
padding: 0;
}
#container * {
border: 1px solid black;
}
兼容性：IE6+、Firefox、Chrome、Safari、Opera
select1,select2,select3 ： 分组选择器
2. 层级选择器
ancestor descendant ：后代选择器（给定祖先元素下匹配所有的后代元素） 1
parent > child ：子代选择器 （父元素下匹配所有的子元素） 2
prev + next ：兄弟选择器（紧接在prev后面的next元素，next元素指的是下一个相邻同辈元素） 2
prev ~ next ： 匹配prev元素之后的所有同辈元素 2
3. 属性选择器
[attribute] ： [target] 选择带有 target 属性所有元素。 2
[attribute=value] ： [target=_blank] 选择 target="_blank" 的所有元素。 2
[attribute~=value] ： [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2
[attribute|=value] ： [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。 2
[attribute^=value] ： a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 元素。 3
[attribute$=value] ： a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 元素。 3
[attribute*=value] ：a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 元素。 3
4. 基本过滤选择器
:link ： a:link 选择所有未被访问的链接。
:visited ： a:visited 选择所有已被访问的链接。
:active ： a:active 选择活动链接。
:hover ： a:hover 选择鼠标指针位于其上的链接。
:focus ： input:focus 选择获得焦点的 input 元素。
:first-letter ： p:first-letter 选择每个 元素的首字母。
:first-line ： p:first-line 选择每个 元素的首行。
:before ： p:before 在每个元素的内容之前插入内容。
:after ： p:after 在每个元素的内容之后插入内容。
:lang(language) ： p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个元素。
5. 子元素选择器
:first-child ： p:first-child 选择属于父元素的第一个子元素的每个
元素。
:first-of-type ： p:first-of-type 选择属于其父元素的首个
元素的每个
元素。
:last-of-type ： p:last-of-type 选择属于其父元素的最后
元素的每个
元素。
:only-of-type ： p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。
:only-child ： p:only-child 选择属于其父元素的唯一子元素的每个
元素。
:nth-child(n) ： p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。
6. 表单过滤选择器
:enabled ： input:enabled 选择每个启用的 元素。
:disabled ： input:disabled 选择每个禁用的 元素。
:checked ： input:checked 选择每个被选中的元素。
:not(selector) ： :not(p) 选择非元素的每个元素。
::selection ： ::selection 选择被用户选取的元素部分。
7.
:root ： :root 选择文档的根元素。 3
:empty ： p:empty 选择没有子元素的每个
元素（包括文本节点）。 3
:target ： #news:target 选择当前活动的 #news 元素。 3
三、选择器的优先级
从高到低依次是：
1.在属性后面使用 !important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素标签上的内联样式
3.id选择器
4.类选择器
5.伪类选择器
6.属性选择器
7.标签选择器
8.通配符选择器
9.浏览器自定义