css3新的功能

1.属性选择器

[id=articel]{
     color:red;
}

[id*=articel]{
     color:red;
}


[id^=articel]{
     color:red;
}


[id$=articel]{
     color:red;
}

 2.伪类选择器

 :first-child选择某个元素的第一个子元素;

  1.  :last-child选择某个元素的最后一个子元素;
  2.  :nth-child()选择某个元素的一个或多个特定的子元素;
  3.  :nth-last-child()选择某个元素的一个或多个特定的子元素,从这个元素的最后一个子元素开始算;
  4.  :nth-of-type()选择指定的元素;
  5.  :nth-last-of-type()选择指定的元素,从元素的最后一个开始计算;
  6.  :first-of-type选择一个上级元素下的第一个同类子元素;
  7.  :last-of-type选择一个上级元素的最后一个同类子元素;
  8.  :only-child选择的元素是它的父元素的唯一一个了元素;
  9.  :only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素;
  10.  :empty选择的元素里面没有任何内容。
  11. :before和:after,在元素前边和后边添加内容
  12. <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>css3样式</title>
    	<style type="text/css">
    		p:before{
    			content:'前面的文字'
    		}
    		
    		p:after{
    			content:"后面的内容"
    		}
    
    	</style>
    <head>
    <body>
    <p>p的内容</p>
    </body>
    </html>
     box-shadow元素阴影
  13. .shadow {
        -moz-box-shadow: 3px 3px 4px #000;
        -webkit-box-shadow: 3px 3px 4px #000;
        box-shadow: 3px 3px 4px #000;
        /* For IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
        /* For IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
    }
     释义为:横向偏移3像素,纵向偏移3像素,模糊4像素,颜色为纯黑。
  14. text-shadow文字阴影
  15. text-shadow:color length length length; 
  16. color:颜色; length分别按顺序指”X轴方向长度 Y轴方向长度 阴影模糊半径” 
  17. 正值在X轴表示向右,负值表示向左.同样的道理Y轴负值是表示向上. 
  18. 其中任意一个值可以为零也可为空(将做默认处理)

相关推荐