css屬性選擇器程式碼例項

antzone發表於2017-04-12
CSS

分享一段程式碼例項，它演示了各種屬性選擇器的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div {
  padding: 10px 0;
}
 
div[class] {
  color: #f00;
}
 
div[class=a] {
  border-bottom: 1px solid #000;
}
 
div[class~=b] {
  font-weight: bold;
}
 
div[class^=cus] {
  background: #ccc;
}
 
div[class$=tom] {
  margin-top: 10px;
}
 
div[class*=s] {
  text-decoration: underline;
}
 
div[class|=zh] {
  color: blue;
}
</style>
</head>
<body>
  <div class="a">螞蟻部落一</div>
  <div class="a b custom">螞蟻部落二</div>
  <div class="custom a b zh-cn">螞蟻部落三</div>
  <div class="zh-cn">螞蟻部落四</div>
</body>
</html>

如果想知道每一個選擇器的具體使用方式可以參閱相關閱讀。

相關閱讀:

（1）.[class]可以參閱CSS E[att]一章節。

（2）.[class=a]可以參閱CSS E[att="val"]一章節。

（3）.[class~=b]可以參閱CSS E[att~="val"]一章節。

（4）.[class^=cus]可以參閱CSS E[att^="val"]一章節。

（5）.[class$=tom]可以參閱CSS E[att$="val"]一章節。

（6）.[class*=s]可以參閱CSS E[att*="val"]一章節。

相關文章