<!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>无标题文档</title> <style type="text/css"> img{height:200px;} span~img{ border: 10px solid #FF0; } </style> </head> <body> <span><img src="http://www.psahz.com/uploads/allimg/120803/110Z1J07-0.jpg"></span> <img src="http://www.psahz.com/uploads/allimg/120803/110Z1J07-0.jpg"/> </body> </html>
其中css3增加了三个属性选择
【att^='value'】 表示已指定的值开始
【att$='value'】 表示以指定的值结束
【att*=‘value’】 表示包含该值的所有元素
例如下面：
<html> <head> <style type="text/css"> div[class^='wenzi1']{ color:#FF0 /*以wenzi1开头*/ } </style> </head> <body> <div class="wenzi1">你好</div> <div class="wenzi2">你好</div> </body> </html>
当^变为$时两个你好都不会变颜色
当变为*时两个都会变颜色