Css3 选择器 --属性选择器
E[attr]只使用属性名，但没有确定任何属性值，
E[attr="value"]指定属性名，并指定了该属性的属性值
E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写 E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的（注意：这个方法会把attr的属性值当做一个整体字符串处理，即如果有多个值，中间用空格隔开，空格也算作'value的一部分'）
E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的（注意：这个方法会把attr的属性值当做一个整体字符串处理，即如果有多个值，中间用空格隔开，空格也算作'value的一部分'）
E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value
E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 li{height:30px; border:1px solid #000;margin:5px 0;} 8 li[name]{ background:red;} 9 li[name = 'title1']{background:black} 10 li[name ~= 'val4']{background:pink} 11 li[name ^= 'val3']{background:gray} 12 li[name $= ' val4']{background:green} 13 li[name *= '1val3']{background:blue} 14 li[name |= 'v']{background:yellow} 15 </style> 16 </head> 17 <body> 18 <ol> 19 <li></li> 20 <li name="val1"></li> 21 <li></li> 22 <li name="val2"></li> 23 <li></li> 24 <li name='title1'></li> 25 <li></li> 26 <li name='val3 val4'></li> 27 <li></li> 28 <li name='val3val4'></li> 29 <li></li> 30 <li name='val1val3val4'></li> 31 <li></li> 32 <li name='v-3'></li> 33 <li></li> 34 <li name='v'></li> 35 </ol> 36 </body> 37 </html>
Css3 选择器 –结构性伪类
E:nth-child(n) 表示E父元素中的第n个字节点
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red}
注意：n起始是0；第一个子元素的下标是1；
E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算
E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E
E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算
E:empty 表示E元素中没有子节点。注意：子节点包含文本节点
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
E:only-child表示E的父元素中只有个一个子节点，且子节点的类型为E。注意：子节点不包含文本节点
E:only-of-type 表示E的父元素中子节点E的数量有且只有一个。注意：子节点不包含文本节点
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <style> 7 li,p{height:30px; border:1px solid #000;margin:5px 0;} 8 li:nth-child(2n+1){background: red} 9 li:nth-last-child(2){background: yellow} 10 li:nth-of-type(3){background:grey} 11 li:empty{background: black;} 12 li:first-child{background: blue;} 13 li:last-child{background: blue;} 14 p:first-of-type{background: green;} 15 div div:last-of-type{background:green;} 16 p span:only-child{background:pink;} 17 strong:only-of-type{background:orange} 18 </style> 19 </head> 20 <body> 21 <ol> 22 <li> </li> 23 <li> </li> 24 <li> </li> 25 <li></li> 26 <li> </li> 27 <li> </li> 28 <li> </li> 29 <li> </li> 30 <li> </li> 31 <li> </li> 32 </ol> 33 <div> 34 35 <p><span>1</span></p> 36 <div>div</div> 37 <p><span></span></p> 38 <div>div</div> 39 <p><span>p3</span></p> 40 <p><span></span></p> 41 <p></p> 42 <div>div</div> 43 <strong>strong</strong> 44 </div> 45 </body> 46 </html>
Css3 选择器 --伪类
E:target 表示当前的URL片段的元素类型，这个元素必须是E
E:disabled 表示不可点击的表单控件
E:enabled 表示可点击的表单控件
E:checked 表示已选中的checkbox或radio
E:first-line 表示E元素中的第一行
E:first-letter 表示E元素中的第一个字符
E::selection表示E元素在用户选中文字时
E::before 生成内容在E元素前
E::after 生成内容在E元素后
E:not(s) 表示E元素不被匹配 （s可以是css基本的选择器，例如#id，.class，tag）
E~F表示E元素毗邻的F元素
新增颜色模式
rgba
r Red 红 0-255
g Green 绿 0-255
b Blue 蓝 0-255
a Alpha 透明 0-1
Hsl(基本用不到，因为太专业了。。)
H Hue 色调 任意数值
S saturation 饱和度
0%-100%
L Lightness 亮度 0%-100%
文字阴影
text-shadow：x y blur color, …
参数 x 横向偏移
y 纵向偏移
blur 模糊距离
color 阴影颜色
文本阴影如果加很多层，会很卡很卡很卡
阴影叠加 text-shadow:2px 2px 0px red, 2px 2px 4px green;
先渲染后面的，再渲染前面的
文字相关内容
文字描边
-webkit-text-stroke:宽度 颜色
新增文本功能
Direction 定义文字排列方式(全兼容)
Rtl 从右向左排列
Ltr 从右向左排列
注意要配合unicode-bidi 一块使用
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{ width:400px; border:1px solid #000;direction:rtl;unicode-bidi:bidi-override;} </style> </head> <body> <p>独家：美国与数千公司合作获取情报</p> </body> </html>
Text-overflow 定义省略文本的处理方式
clip 无省略号
Ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{ width:300px;border:1px solid #000; line-height:30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} </style> </head> <body> <p>元素不会对双向算法打开附加的一层嵌套。对于行内元素，顺序的隐式重排会跨元素边界进行。</p> </body> </html>
自定义文字
格式
@font-face {
font-family: ‘miaov';
src: url('111-webfont.eot');
src: url('111-webfont.eot?#iefix') format('embedded-opentype'),
url('111-webfont.woff') format('woff'),
url('111-webfont.ttf') format('truetype'),
url('111-webfont.svg#untitledregular') format('svg');
font-weight: normal;
font-style: normal;
}
转换字体格式生成兼容代码
http://www.fontsquirrel.com/fontface/generator