屬性選擇器（重要，常用）
阿新 • • 發佈：2022-03-27
a[]{} 標籤 [屬性名=屬性值(正則)]
= 絕對等於
*=包含這個元素
^=以這個開頭
$=以這個結尾
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .demo a{ 8 float: left; 9 display: block; 10 height: 50px; 11 width: 50px; 12 border-radius: 10px; 13 background: deepskyblue; 14 text-align: center; 15 color: grey; 16 text-decoration: none; 17 margin-right: 5px; 18 font: bold 20px/50px Arial; 19 } 20 /*存在id屬性的元素 21 a[]{} 標籤 [屬性名=屬性值(正則)] 22 = 絕對等於 23 *=包含這個元素 24 ^=以這個開頭 25 $=以這個結尾 26 */ 27 /*a[id]{*/ 28 /* background: yellow;*/ 29 /*}*/ 30 31 /*a[id=first]{*/ 32 /* background: yellow;*/ 33 /*}*/ 34 35 /*class中有links的元素*/ 36 a[class*="links"]{ 37 background: #3cbda6; 38 } 39 /*選中href屬性以http開頭的元素 40 41 */ 42 a[href^=http]{ 43 background: yellow; 44 } 45 a[href$=pdf]{ 46 background: salmon; 47 } 48 49 </style> 50 </head> 51 <body> 52 53 <p class="demo"> 54 <a href="http://www.baidu.com" class="links item first" id="first">1</a> 55 <a href="http://www.nihao.com" class="links item active" target="_blank" title="test">2</a> 56 <a href="images/123.html" class="links item" >3</a> 57 <a href="images/123.png" class="links item">4</a> 58 <a href="images/123.jpg" class="links item">5</a> 59 <a href="abc" class="links item">6</a> 60 <a href="/a.pdf" class="links item">7</a> 61 <a href="/abc.pdf" class="links item">8</a> 62 <a href="abc.doc" class="links item">9</a> 63 <a href="abcd.doc" class="links item last">10</a> 64 </p> 65 66 </body> 67 </html>