css属性选择器代码实例
分类:实例代码
分享一段代码实例,它演示了各种属性选择器的效果。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <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"]一章节。