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-boxbackground-clip背景裁切    padding-box    border-box（默认值）    content-box多背景设置    以逗号分隔，顺序在前的，显示层级高

css3颜色属性

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