CSS3選擇器--屬性選擇器
阿新 • • 發佈：2019-02-07
在此之前，大家應該學了一些基本的css選擇器，比如簡單的id選擇器，class選擇器，標籤選擇器，群組選擇器，包含選擇器等， 本篇文章主要是分享幾個CSS3的屬性選擇器，當然有幾個其實CSS已經可以應用，我這裡只是一起總結，寫在一起了。屬性選擇器應用起來還是非常方便的。
一、'匹配所有'的屬性選擇器
Element[attribute]，只使用屬性名，但是沒有確定的任何屬性值。例子如下，通過匹配屬性為course的標籤，就可以匹配所有屬性為course的標籤。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ height:30px; width:300px; border:1px solid #00A2E9; } p[course]{ background-color: #85f8ff; } </style> </head> <body> <p course="h-html">HTML</p> <p course="c-css j">CSS</p> <p course="j-js m-j">JavaScript</p> <p course="j-jq m-j">jQuery</p> </body> </html>
效果：
Element[attribute=‘value’]，指定屬性名，並指定了該屬性的屬性值，該屬性值只能有一個。例子如下（結構跟上面的一樣）：
p[course='h-html']{
background-color: #ff8fdc;
}
三、'匹配指定值'的屬性選擇器
Element[attribute~=‘value’]，指定屬性名，並且具有屬性值，此屬性值是一個詞列表，並且以空格隔開，其中詞列表中包含了一個value詞，而且等號前面的“〜”不能不寫。例子如下（結構跟上面的一樣）：
效果：p[course~='c-css']{ background-color: #73ff58; }
四、'匹配開頭'的屬性選擇器
Element[attribute^=‘value’]，指定了屬性名，並且有屬性值，屬性值是以value開頭的。例子如下（結構跟上面的一樣）：
p[course^='j']{
background-color: #ffef6e;
}效果：
五、'匹配結尾'的屬性選擇器
Element[attribute$=‘value’]指定了屬性名，並且有屬性值，而且屬性值是以value結束的。例子如下（結構跟上面的一樣）：
p[course$='j']{
background-color: #34b1ff;
}
六、'匹配包含內容'的屬性選擇器
Element[attribute*=‘value’]指定了屬性名，並且有屬性值，而且屬值中包含了value。例子如下（結構跟上面的一樣）：
p[course*='m']{
background-color: #ff2834;
}
七、'匹配開頭'的屬性選擇器
Element[attribute|=‘value’]指定了屬性名，並且屬性值是value或者以“value-”開頭的值（比如說zh-cn）。例子如下（結構跟上面的一樣）：
p[course|='j']{
background-color: #382aff;
}效果：
最後寫一個案例說明，模仿百度文庫，如果檔案是ppt，前面的圖片就顯示ppt，如果是word，前面的圖片就顯示word，如果是pdf，前面就顯示pdf的圖片。效果如下：
程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模仿百度文庫</title>
<style>
p{
width:300px;
height:30px;
font-size: 15px;
}
p a{
padding-left: 25px;
height:30px;
line-height:30px;
text-decoration: none;
display: block;
}
a[href*='word']{
background:url("images/word.png") no-repeat 3px center;
}
a[href*='ppt']{
background:url("images/ppt.png") no-repeat 3px center;
}
a[href*='pdf']{
background:url("images/pdf.png") no-repeat 3px center;
}
</style>
</head>
<body>
<p><a href="http://www.wenku.baidu/ppt/javascript.html">JavaScript教程--從入門到精通</a></p>
<p><a href="http://www.wenku.baidu/word/javascript.html">javascript簡介</a></p>
<p><a href="http://www.wenku.baidu/pdf/javascript.html">javascript教程</a></p>
</body>
</html>