CSS3属性选择器

1、基本介绍

（1）[att*=val]属性选择器

         如果元素用att表示的属性的属性值中包含用val指定的字符，则该元素使用这个样式

（2）[att^=val]属性选择器

         如果元素用att表示的属性的属性值的开头字符为用val指定的字符，则该元素使用这个样式

 

（3）[att$=val]属性选择器

         如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，则该元素使用这个样式

2、实例说明

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>CSS3属性选择器</title>  
  6. <style type="text/css">  
  7.    [id*=div3]{  
  8.        background-color:#C00;  
  9.    }  
  10.    [id^=div2]{  
  11.        background-color:#0F0;  
  12.    }  
  13.    [id$=div1]{  
  14.        border:1px solid #00F;  
  15.        font-size:42px;  
  16.    }  
  17. </style>  
  18. </head>  
  19.   
  20. <body>  
  21.    <div id="div1">  
  22.       <p>Hello</p>  
  23.    </div>  
  24.    <div id="div1_div2">  
  25.       <p>您好！</p>  
  26.    </div>  
  27.    <div id="div1">  
  28.       <button>查询</button>  
  29.    </div>  
  30.    <div id="div2">  
  31.        <input id="man" type="radio"/>男  
  32.        <input id="woman" type="radio"/>女  
  33.    </div>  
  34.    <div id="div2_div1">  
  35.        <input type="text" value="姓名"/>  
  36.    </div>  
  37.    <div id="div1_div2_div3">  
  38.        <input type="checkbox"/>篮球  
  39.    </div>  
  40. </body>  
  41. </html>  

3、实例结果

 


posted @ 2013-11-18 09:14  web8  阅读(479)  评论(0)  编辑  收藏  举报