css属性选择器 

<!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>

 

当^变为$时两个你好都不会变颜色

当变为*时两个都会变颜色

 

posted @ 2017-05-13 16:06  金牛小子  阅读(141)  评论(0)  编辑  收藏  举报