CSS3的[att^=val]选择器

来源：互联网发布：中非混血儿受歧视知乎编辑：程序博客网时间：2024/04/27 17:56

1、实例源码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS3的[att^=val]选择器</title><style type="text/css">   [id^=div_border]{   background-color:#9F6;   width:160px;   font-family:微软雅黑;   font-size:18px;   font-size-adjust:!important;   font-stretch:expanded;   font-style:oblique;   font-variant:inherit;   font-weight:bolder;   alignment-adjust:after-edge;   alignment-baseline:alphabetic;   marquee-speed:normal;   }   [id^=child]{   background-color:#C00;   animation:ease-in;   word-break:break-all;   font-size:24px;   font-style:italic;   color:#30F;   }</style></head><body>   <div id="div_border">      <ol>         <li id="child1">星期一</li>         <li id="parent">星期二</li>         <li id="childchild">星期三</li>         <li id="sonchild1">星期四</li>         <li id="son">星期五</li>         <li id="sonchildson">星期六</li>         <li id="childsonparent">星期日</li>       </ol>   </div></body></html>

2、实例结果

3、说明

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

1 0