css3选择器

css选择器基础

---

浏览器前缀

1. trident内核（代表ie）—–ms-
2. gecko内核（代表firebox）—–moz-
3. preso内核（代表opera）—–o-
4. webkit内核（代表chiome和safari）—–webkit-
   

   ---

属性选择器

1. e【tittle】—–选择e下所有tittle属性的标签
2. e【tittle=value】选择e下所有tittle=value的标签
3. e【tittle^=value】选择e下所有用value开头的标签
4. e【tittle$=value】选择e下所有用value结尾的标签
5. e【tittle*=value】选择e下所有带有value的标签

---

伪类选择器

-type

1. nth-of-type（1） —–遇到的第一个进行设置
2. first-of-type——-遇到的首个进行设置
3. last-of-type遇到的左后一个进行设置
4. only-of-type只有一个的时候进行设置

child

1. E:nth-child—-遇到的第几个子集进行设置
2. E:first-child—-遇到的第一个子集进行设置
3. E:last-child—-遇到的最后一个子集进行设置
4. E:only-child—-遇到的只有一个是进行设置

其他

---

1. :root—最高权重
2. :not—-取消
3. :target—当点击时

状态伪类选择器

:focus —-框会变色
:checked —–选中就会变色
::selection—-选择的会变色
:first-letter—–第一个字
:first-line—–第一行
:enabled—–允许输入
:disabled——不能输入
:read-only—–只读
:read-write—–读写
:before—–前面加东西
:after—后面加东西

其他

伪类和伪元素的区别
1. ~
div~p
2. +
div+p
3. >
div>p

---

text-shadow文字阴影

1. x轴偏移量
2. y轴偏移量
3. blur模糊值
4. color颜色
5. 多阴影

text-shadow {
  0 0 1px red；
}

text-stroke文字描边

1. w描边宽度
2. color颜色
3. 当前就webkit内核支持，需要加-webkit前缀

text-stroke {
2px red;
}

text-overflow文字溢出隐藏

1. ellipsis  省略号
2. clip剪切(默认)
3. 搭配属性：

    a. white-space:nowrap让文字不换行
    b. overflow：hidden 
    4. 溢出隐藏
5. 多行文本省略号
    webkit内核下多行文本省略号

    6. 通用方法

css3背景属性

background-size背景尺寸
    length
    percentage
    cover
        不去管图片能不能显示完整，保证必须把盒子铺满
    contain
        不去管盒子是否铺满，保证必须把图片显示完整
background-origin背景位置
    padding-box(默认)
    border-box
    content-box
background-clip背景裁切
    padding-box
    border-box（默认值）
    content-box
多背景设置
    以逗号分隔，顺序在前的，显示层级高

css3颜色属性

opacity
rgba
filter:alpha(opacity=40)
linear-gradient
    线性渐变
        point || angle
        color
        percentage
    Tip：渐变是css的属性，这个属性应用在background-image身上
radial-gradient
    径向渐变