CSS3

1. css3属性选择器
   • 根据属性名查找某个标签(E[attr])，代码如下
   •     
     dhl
         
     xiaobei
   • 查找某个属性名为固定值的某个标签(E[attr="value"])，测试代码如下：
   •     
     dhl
         
     xiaobei

      

   • E[attr~="value"] 指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表包含了一个value词，而且等号前面的"~"不能不写，详细代码如下：
   •     
     dhl
         
     xiaobei

      

   • E[attr^="value"]指定了属性名，并且具有属性值，属性值是以value开头的，测试代码如下：
   •     
     dhl
         
     xiaobei

      

   • E[attr$="value"]指定了属性名，并且具有属性值，属性值是以value结尾的，测试代码如下：
   •     
     dhl
         
     xiaobei

      

   • E[attr*="value"] 指定了属性名，并且有属性值，而且属性值中包含了value，测试代码省略
   • E[attr|="value"] 指定了属性名，并且属性值为value或者以"value-"开头的值
2. css3结构性伪类
   • E:nth-child(n)，表示E父元素中的第n个子节点，测试代码如下：
   •     
     1
         
     2
         
     3
         
     4
         
     5

      

   • 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
3. css3选择器-伪类
   • E:target表示当前的URL片段的元素类型，这个元素必须是E，代码如下：
   •     div1    div2    
              
         
              
     

      

   • E:disabled表示不可点击的表单控件，E:enabled表示可点击的表单控件
   •  

   • E~F表示与E毗邻的F元素
   •     
     h
         // p标签之后的两个h1标签均变为红色    
     p1
         
     red
         
     red

      

   • 文本相关的伪类：E:first-line表示E元素中的第一行，E:first-letter:表示E元素中的第一个字符， E::selection表示E元素在用户选中文字时
   •  

   • E::before生成内容在E元素前，E::after生成内容在E元素后
   • E:(not)排除掉某一项，讲解代码如下：
   •     
     h1
         

      
4. 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;}