css3新增选择器

结构伪类选择器：

first-child父元素的首个子元素指定的选择器

last-child父元素最后一个子元素

nth-child父元素的第N个子元素 不论元素类型

nth-child(4)  选择第4个孩子  n代表的是第几个的意思

nth-last-child  选择器匹配属于其元素的第N个子元素的每个元素

目标伪类选择器：

target ：目标伪类选择器，选择器可用于选取当前活动的目标元素

属性选择器

选取标签带有某些特殊属性的选择器  

```css
/* 获取到 拥有 该属性的元素 */
div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */
			color: pink;
		}
div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */
			color: skyblue;
		}
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
			color: green;
		}
```

```html
<div class="font12">属性选择器</div>
    <div class="font12">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="24font">属性选择器123</div>
    <div class="sub-footer">属性选择器footer</div>
    <div class="jd-footer">属性选择器footer</div>
    <div class="news-tao-nav">属性选择器</div>
    <div class="news-tao-header">属性选择器</div>
    <div class="tao-header">属性选择器</div>

伪元素选择器
first-letter 文本的第一个单词或字
first-line 文本第一行
selection 可改变选中文本的样式

E：before和E：after
E元素内部的开始位置和结束位创建一个元素 该元素为行内元素 且必须要结合content属性使用
注意：
伪元素before和after 添加的内容默认是inline元素** 这两个伪元素的“content”属性表示伪元素的内容 设置，before和after 时必须设置content属性 否则不起作用


背景缩放：
通过background-size设置背景图片的尺寸 

css盒模型
box-sizing 为content-box 或 border-box
content-box 盒子大小为 width+padding+border  content-box：此值为其默认的W3c标准
border-box：盒子大小为width padding和border会包含到width里面的

过渡
transition 是css3中具有颠覆性的特征之一 我们可以不再flash动画后js情况下。当元素从一种样式变换到另一种演示时为元素添加效果

| 属性                         | 描述                      | CSS  |
| -------------------------- | ----------------------- | ---- |
| transition                 | 简写属性，用于在一个属性中设置四个过渡属性。  | 3    |
| transition-property        | 规定应用过渡的 CSS 属性的名称。      | 3    |
| transition-duration        | 定义过渡效果花费的时间。默认是 0。      | 3    |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3    |
| transition-delay           | 规定过渡效果何时开始。默认是 0。       | 3    |

backface-visibility 属性定义当元素不面向屏幕时是否出现