CSS选择器2

by Mike Lin

HTML

<div class="first">
  <a target="_blank" src="http://blog.5udou.cn">
    因为我包含target这个属性，所以我的颜色变了
  </a>
  <br />
  <a src="http://blog.5udou.cn">
    因为我不包含target这个属性，所以我的颜色没变
  </a>
</div>
<div class="second">
  <a target="_blank" src="http://blog.5udou.cn">
    因为我包含target属性并且值等于_blank，所以我的颜色变了
  </a>
  <br />
  <a target="_self" src="http://blog.5udou.cn">
    虽然我包含target这个属性，但是我的值不等于_blank，所以我的颜色没变
  </a>
</div>
<div class="third">
  <img src="http://blog.5udou.cn/images/index5.jpg" title="doumi wedding" width="150" />
  <span>因为我的title属性中有doumi这个值，所以我有加边框</span>
  <br />
  <img src="http://blog.5udou.cn/images/index5.jpg" title="wedding" width="150" />
  <span>因为我的title属性中没有doumi这个值，所以我没有加边框</span>
  <br />
  <img src="http://blog.5udou.cn/images/index5.jpg" title="wedding doumiA" width="150" />
  <span>因为我的title属性中虽然含有doumi这个字符串，但是不是完整匹配doumi，所以我没有加边框</span>
</div>
<div class="fourth">
  <p lang="us">因为我的lang属性不是以en开始的，所以我的颜色没变</p>
  <p lang="en-us">因为我的lang属性是以en开始的，所以我的颜色变了</p>
  <p class="color-change text">因为我的class属性是以color开始的，所以我的颜色变了</p>
  <p class="colorA-change text">因为我的class属性是以colorA开始的(以-为分隔符)，所以不满足整个单词完全等于选择器中color导致颜色不变</p>
</div>
<div class="fifth">
  <p class="color-change text">因为我的class属性是以color开始的，所以我的颜色变了</p>
  <p class="colorA-change text">因为我的class属性是以color开始的(这个时候不管整个单词)，所以我的颜色变了，与|选择器做个区别</p>
</div>
<div class="sixth">
  <p class="color-change">因为我的class属性是以change结尾的，所以我的颜色变了</p>
  <p class="color-Achange text">因为我的class属性是以text结尾的，所以我的颜色不变</p>
</div>
<div class="seventh">
  <p class="color-text-change">因为我的class属性是包含text这个字符串，所以我的颜色变了</p>
  <p class="color-change Atext">因为我的class属性是包含text字符串，所以我的颜色变了，这个例子与~区别开来，~讲究的也是完整单词</p>
</div>

CSS

.first a[target]{
  color: #F00;
}
.second a[target=_blank]{
  color: #F00;
}
.third img[title~=doumi]{
  margin: 5px;
  border: 2px solid #00F;
}
.fourth p[lang|=en]{
  color: #0F0;
}
.fourth p[class|=color]{
  color: #00F;
}
.fifth p[class^=color]{
  color: #00F;
}
.sixth p[class$=change]{
  color: #0F99FA;
}
.seventh p[class*=text]{
  color: #AF00FA;
}