CSS3
- css3属性选择器
- 根据属性名查找某个标签(E[attr])，代码如下
-
<style> p {height: 30px; border: 1px solid black;} // 查找含有属性test的p标签 p [test] {background: red;} </style> <body> <p test="dhl">dhl</p> <p test="xb">xiaobei</p> </body> - 查找某个属性名为固定值的某个标签(E[attr="value"])，测试代码如下：
-
<style> p {height: 30px; border: 1px solid black;} // 查找test属性值为dhl的p标签 p [test="dhl"] {background: red;} </style> <body> <p test="dhl">dhl</p> <p test="xb">xiaobei</p> </body> - E[attr~="value"] 指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表包含了一个value词，而且等号前面的"~"不能不写，详细代码如下：
-
<style> p {height: 30px; border: 1px solid black;} // 查找含有属性test，并且属性值列表中含有young的p标签 p [test~="young"] {background: red;} </style> <body> <p test="dhl young">dhl</p> <p test="xb">xiaobei</p> </body> - E[attr^="value"]指定了属性名，并且具有属性值，属性值是以value开头的，测试代码如下：
-
<style> p {height: 30px; border: 1px solid black;} // 查找含有属性test，并且属性值以"girl"开头的p标签 p [test^="girl"] {background: red;} </style> <body> <p test="gjrldhl">dhl</p> <p test="boyxb">xiaobei</p> </body> - E[attr$="value"]指定了属性名，并且具有属性值，属性值是以value结尾的，测试代码如下：
-
<style> p {height: 30px; border: 1px solid black;} // 查找含有属性test，并且属性值以"dhl"结尾的p标签 p [test$="dhl"] {background: red;} </style> <body> <p test="gjrldhl">dhl</p> <p test="boyxb">xiaobei</p> </body> - E[attr*="value"] 指定了属性名，并且有属性值，而且属性值中包含了value，测试代码省略
- E[attr|="value"] 指定了属性名，并且属性值为value或者以"value-"开头的值
- css3结构性伪类
- E:nth-child(n)，表示E父元素中的第n个子节点，测试代码如下：
-
<style> p {height: 30px; border: 1px solid black;} p: nth-child(1) {background: red;} </style> <body> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </body> - E:nth-child(even),表示E父元素中的偶数子节点，odd表示奇数子节点；
- E:nth-child(2n),2n-1, 3n,,,
- p:nth-child(2)找到p标签父级下的第二个子元素，并且这个元素还得是p标签，如果不是p标签，则不生效
- E:nth-last-child(2),表示E的父元素的所有子节点中的倒数第二个
- E:nth-of-type(2) {background: red}找到p标签父元素下的第二个p标签
- E:nth-last-of-type(n),表示E的父元素的所有子节点倒数第n个
- E:first-child E元素父节点的第一个子节点
- E:empty 表示E元素没有子节点，注意：子节点中包含文本节点
- E:only-of-type表示E的父元素中只有一个子节点，且这个唯一的子节点的类型必须是E
- css3选择器-伪类
- E:target表示当前的URL片段的元素类型，这个元素必须是E，代码如下：
-
<style> div { 200px; height: 200px; background: black; font:50px/200px "微软雅黑"; color: #fff; text-align:center; display:none;} div:target {display:block;} </style> <body> <a href="#div1">div1</a> <a href="#div2">div2</a> <div id="div1"></div> <div id="div2"></div> </body> - E:disabled表示不可点击的表单控件，E:enabled表示可点击的表单控件
-
<style> input{100px;height:200px; color:#000;} input:enabled {color;red;} input:disabled {color:blue;} </style> <body> <input type="text" value="请输入" disabled /> </body> - E~F表示与E毗邻的F元素
-
<style> p~h1{background: red;} </style> <body> <h1>h</h1> // p标签之后的两个h1标签均变为红色 <p>p1</p> <h1>red</h1> <h1>red</h1> </body> - 文本相关的伪类：E:first-line表示E元素中的第一行，E:first-letter:表示E元素中的第一个字符， E::selection表示E元素在用户选中文字时
-
<style> p {widht: 300px; height: 300px; border: 1px solid black; font: 10px "微软雅黑"; padding: 10px;} p: first-line{ background: red;} p: first-letter{font-size: 30px;} p::selection{background#F60; color: #690;} <style> <body> <p>hahaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> </body> - E::before生成内容在E元素前，E::after生成内容在E元素后
- E:(not)排除掉某一项，讲解代码如下：
-
<style> h1:not(.h2）{background: red;} </style> <body> <h1>h1</h1> <h1 class="h2>h1</h1> <h1>h1</h1> </body>
- css3新增颜色模式
- rgba: r:red, g: green, b: blue, a:alpha(可以解决一个问题：单纯的给某个标签设置透明度造成里面的全部都透明度改变了，所以可以通过rgba来改变透明度)
- 文字阴影：text-shadow: 0 0 10px red; 分别是水平方向，垂直方向，模糊程度，颜色
- 多层阴影： text-shadow: 0 0 10px blue, 10px 10px 10px green;
- text-shadow: x y blur color; x:横向偏移， y:纵向偏移，blur: 模糊距离， color: 阴影颜色
- 文字方向： direction: rtl; 一定要配合unicode-bidi使用，即:unicode-bidi:bidi-override;
- 省略文本的处理方式： text-overflow: clip（无省略号）ellipse（省略号）；注意配合：overflow:hidden和white-space:nowrap一起使用；
- 自定义文字，转换字体格式生成兼容代码：http://www.fontsquirrel.com/fontface/generator
-
@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; }