基本选择器

通配符选择器 *
元素选择器 elementName
类选择器 .className
ID选择器 #id
后代选择器 ul li

新增基本选择器

子元素选择器

概念： 只能选择元素的子元素
语法： 父元素 > 子元素 (Father > Children)
兼容性： IE8+

.header > .item { color : #fff; }

相邻兄弟元素选择器

概念： 可以选择紧接在元素后的元素(匹配单个元素)，而且他们具有同一父元素
语法： 元素 + 兄弟相邻元素 (Element + Sibling)
兼容性： IE8+
注意： 必须是之后紧邻，且只操作Sibling,不操作Element

.header > .item + .box { color : #fff; }

通用兄弟选择器

概念： 选择元素后的所有兄弟元素，而且他们具有同一父元素
语法： 元素 ~ 兄弟相邻元素 (Element ~ Siblings)
兼容性： IE8+
注意： 必须是之后，且只操作Siblings,不操作Element

.header > .item ~ .box { color : #fff; }

群组选择器

概念： 具有相同样式的元素分组在一起，每个选择器之间使用逗号,隔开
语法： 元素1,元素2,元素3, (Element1,Element2,Element3)
兼容性： IE6+
注意： 必须是之后，且只操作Siblings,不操作Element

.header, .item, .box { color : #fff; }

属性选择器

概念： 对带有指定属性的HTML元素设置样式

Element[arrtibute]

概念： 对带有attribute属性的Element元素设置样式
兼容性： IE8+

a[target] { color : #fff; }

Element[arrtibute=”value”]

概念： 对attribute属性值为value的Element元素设置样式
兼容性： IE8+

a[target="_blank"] { color : #fff; }

Element[arrtibute~=”value”]

概念： 对attribute属性值包含单词value的Element元素设置样式
兼容性： IE8+
注意： value必须是单词，而不是单词的一部分

div[class~="box"] { color : #fff; }

Element[arrtibute^=”value”]

概念： 对attribute属性值以value开头的Element元素设置样式
兼容性： IE8+
注意： value可以是单词的一部分

div[class^="box"] { color : #fff; }

Element[arrtibute$=”value”]

概念： 对attribute属性值以value结尾的Element元素设置样式
兼容性： IE8+
注意： value可以是单词的一部分

div[class$="box"] { color : #fff; }

Element[arrtibute*=”value”]

概念： 对attribute属性值包含value的Element元素设置样式
兼容性： IE8+
注意： value可以是单词的一部分

div[class*="box"] { color : #fff; }

Element[arrtibute|=”value”]

概念： 对attribute属性值为value或者以value-开头的Element元素设置样式
兼容性： IE8+

div[class|="box"] { color : #fff; }

伪类选择器

动态伪类

这些伪类并不存在于HTML中，只有当用户和网站交互的时候才能体现出来

锚点伪类

:link
:visited

用户行为伪类

:hover
:active
:focus

a:link{color: #000;}
a:hover{color: #000;}
a:active{color: #000;}
a:visited{color: #000;}
input:focus{border: 1px solid #ccc;}

UI元素状态伪类

:enabled

兼容性： IE9+
:disabled

兼容性： IE9+
:checked

兼容性： 只有Opera兼容

input:enabled{height: 30px;}
input:disabled{height: 40px;}

CSS3结构类

CSS3的:nth选择器

Element: first-child

概念：选择属于其父元素的首个子元素，类型必须是Element，并为其设置样式
兼容性：IE8+
注意： 必须是其父元素的首个子元素，且类型与Element相同
```
  p:first-child{color:#000;}
  div>p:first-child{color:#000;}
```
Element: last-child

概念：选择属于其父元素的最后一个子元素，类型必须是Element，并为其设置样式
兼容性：IE8+
注意： 必须是其父元素的最后一个子元素，且类型与Element相同
```
  p:last-child{color:#000;}
  div>p:last-child{color:#000;}
```
Element: nth-child(N)

概念：选择属于其父元素的第N个子元素，类型必须是Element，并为其设置样式
兼容性：IE9+, Firefox4+
注意： 类型必须是Element
关于参数(N)
- :nth-child(n) ：n代表从0开始计算，只能用n表示
- :nth-child(2n+1) ：第1,3,5,7…个
- :nth-child(odd) ：第奇数个
- :nth-child(even) ：第偶数个
```
  p:nth-child(3){color:#000;}
  p:nth-child(n){color:#000;}
  p:nth-child(2n+1){color:#000;}
  p:nth-child(odd){color:#000;}
  p:nth-child(even){color:#000;}
```
Element: nth-last-child(N)

概念：选择属于其父元素的第N个子元素，从最后一个子元素开始计数，类型必须是Element，并为其设置样式
注意： 从最后一个子元素开始计数
Element: only-child

概念：选择属于其父元素的唯一子元素，类型必须是Element，并为其设置样式
兼容性：IE9+, Firefox4+
注意： 父元素只有一个子元素
Element: first-of-type

概念：选择属于其父元素的首个特定类型子元素，类型必须是Element，并为其设置样式
兼容性：IE9+
```
  p:first-of-type{color:#000;}
  div>p:first-of-type{color:#000;}
```
Element: last-of-type

概念：选择属于其父元素的最后一个特定类型子元素，类型必须是Element，并为其设置样式
兼容性：IE9+
```
  p:last-of-type{color:#000;}
  div>p:last-of-type{color:#000;}
```

Element: nth-of-type(N)

概念：选择属于其父元素的特定类型子元素的第N个，并为其设置样式
兼容性：IE9+, Firefox4+
注意： 类型必须与Element相同

  p:nth-of-type(3){color:#000;}
  p:nth-of-type(n){color:#000;}
  p:nth-of-type(2n+1){color:#000;}
  p:nth-of-type(odd){color:#000;}
  p:nth-of-type(even){color:#000;}

Element: nth-last-of-type

概念：选择属于其父元素的特定类型子元素的第N个，从最后一个子元素开始计数，类型必须是Element，并为其设置样式
注意： 从最后一个子元素开始计数
Element: only-of-type

概念：选择属于其父元素的唯一特定类型子元素，并为其设置样式
兼容性：IE9+
注意： 父元素只有一个特定类型的子元素
Element: empty

概念：选择没有子元素（包括文本节点）的Element元素，并为其设置样式
兼容性：IE9+
注意： 没有子元素，也没有文本节点的空元素，类型必须是Element

否定选择器（:not）

:not(Element/Selector) ：选择器匹配非指定元素/选择器的每个元素

语法格式： 父元素:not(子元素/子选择器) Father:not(Element/Selector)

兼容性： IE9+

a:not(:last-of-type){ border: 1px solid #ccc; }

伪元素

CSS伪元素用于向某些选择器设置特殊效果

兼容： IE9+

选择器书写用一个冒号:和两个冒号:都可以

伪元素与伪类的区别

伪元素相当于在HTML中新增加了一个找不到的元素
伪类是一种选择器，选择到的是存在的元素

Element::first-line

概念： 对Element元素的第一行文本进行样式设置
注意： first-line伪元素只能用于块级元素
```
  div::first-line{ font-weight: bold;}
```
Element::first-letter

概念： 对Element元素的首字母进行样式设置
注意： first-letter伪元素只能用于块级元素
Element::before

概念： 在Element元素的内容前面插入新内容
是Element元素的第一个子元素
是行内元素
内容通过content写入
支持一切CSS样式
标签中找不到对应的标签

Element::after

概念： 在Element元素的内容后面插入新内容，常用于清除浮动
是Element元素的最后一个子元素

  .clearfix:after{
      content:"";
      display:block;
      height:0;
      visibility:hidden;
      clear:both;
  }

Element::selection

概念： 用于设置在浏览器中选中文本后的背景色与前景色
兼容性：IE9+, 在Firefox中需要加上其前缀-moz
```
  .box:selection{
      background: #abcdef;
      color: #fff;
  }
```

CSS权重

当很多的规则被应用到某一个元素上时，权重是决定那种规则生效，或者优先级的过程

权重等级与权值

行内样式： 1000
ID选择器： 100
类选择器、属性选择器、伪类选择器： 10
元素选择器、伪元素： 1
通配符* ： 1000

权重计算

从0开始，一个行内样式+1000，一个ID+100，一个属性选择器、class或伪类+10，一个元素或者伪元素+1

包含更高权重选择器的一条规则拥有更高的权重

无论多少个元素组成的选择器，都没有一个class选择器的权重高

学习CSS3--CSS3选择器