1.基本选择器
通配符选择器 * {margin: 0;}
元素选择器 body {background: #ddd;}
类选择器 .list {border: 1px solid #ccc;}
ID选择器 #list {color: #ddd;}
后代选择器 .list li {height: 10px;}
2.基本选择器扩展
子元素选择器 #list > .item {color: pink;}
也称为直接后代选择器，只能匹配到直接后代
相邻兄弟选择器 .list .item + .inner {color: #ddd;}
只会匹配紧跟着的兄弟元素
通用兄弟选择器 #list .item ~ div {border: 1px solid #ddd;}
可以匹配到所有的兄弟元素（不需要紧跟着）
选择器分组 h1,h2,h3 {color: pink;}
这里的逗号称之为 结合符
3.属性选择器
存在 和 值 两种属性选择器
[attr] 该选择器判断是否包含 attr 属性的所有元素， 不论 attr 的值为何
[attr = val] 该选择器仅选择 attr 属性值为 val 的所有元素
[attr ~= val] 根据部分属性值选择 如果需要根据属性值中的词列表的某个词进行选择，则需要使用波浪号（~）。
假设您想选择 class 属性中包含 important 的元素，可以用下面这个选择器做到这一点：
p[class~='important'] {color: #ddd;}
[abc^='def'] 选择abc属性值以 'def' 开头的所有元素
[abc$='def'] 选择abc属性值以 'def' 结尾的所有元素
[abc*='def'] 选择abc属性值中包含 'def' 的所有元素
[abc |= 'def'] 特定属性选择器，选择abc属性等于 def 或 以 def- 开头的所有元素
4.伪类与伪元素选择器
链接伪类
:link 表示作为超链接，并指向一个未访问的地址的所有锚
:visited 表示作为超链接，指向一个已访问的地址的所有锚
:target 表示一个特殊的元素，她的id是URI的片段标识符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>target伪元素选择器</title> <!-- :target 是CSS3新增的一个伪类，可用于选取当前活动的目标元素。当URL末尾带有锚名称 #，就可以 指向文档内某个具体的元素。这个被链接的元素就是目标元素（target element）。它需要一个id去 匹配文档中的 target。 --> <style type='text/css'> #content1, #content2 { display: none; } #content1:target, #content2:target { display: block; } </style> </head> <body> <div> <ul class='nav'> <li><a href="#content1">列表1</a></li> <li><a href="#content2">列表2</a></li> </ul> <!-- 一开始页面中的 #content1 与 #content2 都是隐藏的，当点击列表1触发href="#content1" 时， 页面的 URL 会发生变化：由 url 变成 url#content1 接下来会触发 #content1:target{ } 这条 CSS 规则，#content1 元素由 display:none 变成display:block ，点击列表2亦是如此。 --> <div id="content1">列表1内容:123</div> <div id="content2">列表2内容:abc</div> </div> </body> </html>
动态伪类 hover active 基本可以作用于所有的元素
:hover 悬浮在元素上
:active 被用户激活的元素（点击按住时）
由于 a 标签的 :link 和 :visited 可以覆盖所有 a 标签的状态，所以当 :link :visited :hover :active 身上时，: link 和 :visited 不能放在最后
隐私与:visited选择器
只有下列的属性才能被应用到以访问链接(:visited只有一下三个属性起作用)
color
background-color
border-color
表单伪类
:enabled 匹配可编辑的表单
:disable 匹配被禁用的表单
:checked 匹配被选中的表单
:focus 匹配获得焦点的表单
结构性伪类
index 的值从1开始计数
index可以为变量n（只能是n）
index可以为 even odd
#wrap ele:nth-child(index) 表示匹配#wrap中第index子元素，并且这个子元素必须是ele
#wrap ele:nth-of-type(index) 表示匹配#wrap中的第index的ele子元素
除此之外 :nth-child 和 :nth-of-type 有一个很重要的区别 nth-of-type以元素为中心
:nth-child(index)系列
:fist-child
:last-child
:nth-last-child(index)
:onth-child(相当于:first-child :last-child 或者 :nth-child(1) :nth-last-child(1)) (两个组合)
:nth-of-type(index)系列
:first-of-type
:last-of-type
:nth-last-type(index)
:only-of-type(相当于:first-of-type :last-of-type 或者 :nth-of-type(1) :nth-oast-of-type(1))(两个组合)
:not div > a:not(:last-of-type){border-right; 1px solid #ddd;} a 标签添加右边框，最后一个不加
:empty (内容必须是空的，有空格都不行，有attr可以)
:lang 选择带有lang属性的元素添加样式
:first-line 向文本的首行设置特殊样式
:first-letter 向文本首字母设置特殊样式
:before 在元素的内容前面插入新内容
:after 在元素的内容之后插入新内容
:selection 选中的元素添加样式
5.css声明的优先级
选择器的特殊性
选择器的特殊性由选择器本身的组件确定，特殊性值表述为4个部分如：0,0,0,0
一个选择器的具体特殊性如下：
1.对于选择其中给定的ID属性值加：0,1,0,0
2.对于选择其中给的的各个类属性，属性选怎，或伪类加：0,0,1,0
3.对于选择器中的给定的各个元素和伪元素加：0,0,0,1
4.通配符选择器的特殊性为0,0,0,0
5.结合符对选择器特殊性没有一点贡献
6.内联声明的特殊性都是1,0,0,0
7.继承没有特殊性
特殊性 1,0,0,0 大于所有以0开头的特殊性
选择器的特殊性最终都会授予其对应的声明
如果多个规则与同一个元素匹配，而且有些声明互相冲突时，特殊性越大的越占优势
注意：id 选择器 和 属性选择器
div[id='test'](0,0,1,1) 和 test(0,1,0,0)
重要
有时某个声明比较重要超过了所有其他声明，css2.1就称之为重要声明，并允许在这些声明的结束分号之前
插入 !important 来标志，必须要准确的放置 !important 否则声明无效。
!important 总是要放在声明的最后，即分号的前面
标志为!important 的声明并没有特殊的特殊性值，不过要与非重要声明分开考虑。
实际上所有的重要声明会被浏览器分为一组，重要声明的冲突会在其内部解决
非重要声明会被分为一组，非重要声明的冲突也会在其内部解决
如果一个重要声明和非重要声明冲突，胜出的总是重要声明
继承
继承没有特殊性