css3选择器

CSS选择器

E[att] {} : 选择具有att属性的E元素。
E[att=“val”] {} : 选择具有att属性且属性值等于val的E元素。
E[att~=“val”] {}:用于选取属性值中包含指定词汇的元素。
E[att|=“val”] {}:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素，如果属性值仅为val，也将被选择

E[att*=“val”] {}:选择具有att属性且属性值为包含val的字符串的E元素。
E[att^=“val”] {}:选择具有att属性且属性值为以val开头的字符串的E元素
E[att$=“val”] {}:选择具有att属性且属性值为以val结尾的字符串的E元素

结构伪类选择器

first-line 用于为某个元素的第一行文字使用样式
:first-letter 用于为某个元素的第一个文字使用样式
:before 用于在某个元素之前插入一些内容
:after 用于在某个元素之后插入一些内容
:root 将样式绑定到页面的根元素中
:not 排除某个选择器样式
:empty 使用该选择器来制定当元素内容为空白时使用的样式
:target 使用该选择器来对页面中的某个target元素（锚记链接）指定样式
:first-child 单独指定第一个子元素的样式
:last-child 单独指定最后一个子元素的样式

选择奇偶行

nth-child(odd)与nth-child(even)
不足之处：nth-child选择器在计算子元素时，第奇数个元素还是偶数个元素时，是连同父元素内的所有 子元素一起计算的（默认匹配他们得是相同的子元素）
nth-of-type(odd)奇数和:nth-of-type(even)偶数
完美解决上面的问题

循环使用样式：

nth-child(n)选取每一行
n:所有的行
2n:每2行选择一行
3n:每3行选择一行
n+2:除第1行外所有的行
2n+4:从第4行开始隔1行选择1行
:nth-last-child(n) 从后向前选择,n为参数
n:所有行
2:倒数第2行
-n+3:最后3行
:only-child只有一个元素时使用

私有前缀：

针对浏览器显示差异

RGB颜色选择
color：rgba(R,G,B,A)
以上R、G、B三个参数，正整数值的取值范围为：0 - 255。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。

HSLA颜色选择

background-color：hsl(354,50%,50%)

css3文本效果
a)文本阴影：text-shadow:5px 5px 5px #f66;
指定多个阴影：(参数形式为X坐标 Y坐标 阴影的模糊程度 阴影颜色)
text-shadow:10px 10px #f66,40px 35px #f00,70px 60px #000;
b)自动换行：word-break normal:使用浏览器默认换行规则
keep-all:只能在半角空格或连接字符处换行
break-all:允许在单词内换行（对于标点符号来说，允许标点符号位于行首，
不过在IE中是不可以的）
c)word-wrap：让长单词与URL地址自动换行
word-wrap:break-word;

盒子阴影

box-shadow:5px 5px 10px #f66

圆角
border-radius:5px;

border-image:url(url) A B C D 显示方式
border-image: url(borderimage.png) 25 25 25 25 stretch/repeat/round;
stretch: 拉伸
repeat: 平铺
round：平铺，不会出现断层

Gecko 前缀 火狐-moz-
Presto 前缀 opare -o-
Trident 前缀 ie -ms-
Webkit 前缀 safari -webkit-
blink 谷歌 -webkit-