css属性选择器
1、E[attr]只使用属性名，但没有确定任何属性值
eg:
1 <style> 2 input[type]{border:5px solid red;} 3 </style> 4 </head> 5 <body> 6 <input type="text" /> 7 <input type="password" /> 8 </body>
2、E[attr="value"]指定属性名，并指定了该属性的属性值
eg：
<style> input[type]{border:5px solid red;} input[type=text]{width:200px;} </style> </head> <body> <input type="text" /> <input type="password" /> </body>
3、E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写
eg：
1 <style> 2 p{height:30px;border:1px solid #000;} 3 p[miaov~=leo]{background:red;} 4 </style> 5 </head> 6 <body> 7 <p miaov="miaov leo">leo</p> 8 <p miaov="miaov dupeng">dp</p> 9 <p miaov="miaov zm">zm</p> 10 </body>
4、E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的
eg:
<style> p{height:30px;border:1px solid #000;} p[miaov^=miaov]{background:red;} </style> </head> <body> <p miaov="miaov-leo">leo</p> <p miaov="miaov-dupeng">dp</p> <p miaov="miaov-zm">zm</p> </body>
5、E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的
eg、
<style> p{height:30px;border:1px solid #000;} p[miaov$=leo]{background:red;} </style> </head> <body> <p miaov="miaov-leo">leo</p> <p miaov="miaov-dupeng">dp</p> <p miaov="miaov-zm">zm</p> </body>
6、E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value
eg、
<style> p{height:30px;border:1px solid #000;} p[miaov*=ao]{background:red;} </style> </head> <body> <p miaov="miaov-leo">leo</p> <p miaov="miaov-dupeng">dp</p> <p miaov="miaov-zm">zm</p> </body>
<style> a{ display:block;border:1px solid #000; font:14px/20px "宋体";} a[href*=word]{ color:red;} a[href$=pdf]{ color:yellow;} a[href*=text]{ color:green;} </style> </head> <body> <a href="http://www.miaov.com/word/js.doc">妙味课堂</a> <a href="http://www.miaov.com/pdf/js.pdf">妙味课堂</a> <a href="http://www.miaov.com/text/js.text">妙味课堂</a> </body>
7、E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）
eg、
1 <style> 2 p{height:30px;border:1px solid #000;} 3 p[miaov|=miaov]{background:red;} 4 </style> 5 </head> 6 <body> 7 <p miaov="miaov-leo">leo</p> 8 <p miaov="miaov-dupeng">dp</p> 9 <p miaov="miaov-zm">zm</p> 10 <p miaov="miaov">zm</p> 11 <p miaov="miaov zm">zm</p> 12 <p miaov="zm-miaov">zm</p> 13 </body>
8、E:nth-child(n) 表示E父元素中的第n个字节点
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red}
9、E:nth-last-child(n) 表示E父元素中的第n个字节点，从后向前计算
10、E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E
11、E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算
12、E:empty 表示E元素中没有子节点。注意：子节点包含文本节点
13、E:first-child 表示E元素中的第一个子节点
14、E:last-child 表示E元素中的最后一个子节点
15、E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
16、E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
17、E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点
18、E:only-of-type 表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E。注意：子节点不包含文本节点
19、E:target 表示当前的URL片段的元素类型，这个元素必须是E
20、E:disabled 表示不可点击的表单控件
21、E:enabled 表示可点击的表单控件
22、E:checked 表示已选中的checkbox或radio
23、E:first-line 表示E元素中的第一行
24、E:first-letter 表示E元素中的第一个字符
25、E::selection表示E元素在用户选中文字时
26、E::before 生成内容在E元素前
27、E::after 生成内容在E元素后
28、E:not(s) 表示E元素不被匹配
29、E~F表示E元素毗邻的F元素
30、Content 属性
31、-webkit-text-stroke:2px #000; 文字描边
eg、
<style> .box{font-size:100px; text-align:center;color:red; -webkit-text-stroke:2px #000;} </style> </head> <body> <h1 class="box">妙味课堂</h1> </body>
32、文字阴影 text-shadow：x y blur color, …
参数:
x 横向偏移
y 纵向偏移
blur 模糊距离
color 阴影颜色
文本阴影如果加很多层，会很卡很卡很卡......
最简单用法：
text-shadow:2px 2px 4px black
阴影叠加
text-shadow:2px 2px 0px red, 2px 2px 4px green;
火焰文字：
text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;
eg、
<style> .box1{font-size:100px; text-align:center;color:red; text-shadow:2px 2px 0px white, 4px 4px 0px red;} .box2{font-size:100px; text-align:center;color:#000; text-shadow:10px 10px 10px red,5px 5px 5px green,1px 1px 5px #000;} </style> </head> <body> <h1 class="box1">妙味课堂</h1> <h1 class="box2">妙味课堂</h1> </body>
33、文字排列方向
Direction 定义文字排列方式(全兼容)
Rtl 从右向左排列
Ltr 从右向左排列
注意要配合unicode-bidi 一块使用
eg、
<style> .box{width:200px;border:1px solid #000; direction:rtl;unicode-bidi:bidi-override; transition:0.5s;} .box:hover{color:rgba(0,0,0,0); text-shadow:0 0 30px #000;} </style> </head> <body> <p class="box">妙味课堂</p> </body>
34、自定于字体属性：
格式：
@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/tools/webfont-generator */
35、文字秒表：-webkit-text-stroke:宽度 颜色
36、Text-overflow 定义省略文本的处理方式
clip 无省略号
Ellipsis 省略号 (注意配合overflow:hidden和white-space:nowrap一块使用)
