<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<title>css3属性选择器</title>
???<style>
???????*{margin: 0;padding: 0;}
???????section {
???????????width: 400px;
???????????height: 100px;
???????}
???????/* E[attr=]表示的是一个固定的属性值，只能选择某一个 */
???????.attr1 a[href=".a/sfdf"] {
???????????color: aquamarine;
???????}
???????/* E[attr~=]表示的是一个单独的属性值，这个属性值是以空格分隔开的 */
???????.attr2 a[class~="download"] {
???????????color: aquamarine;
???????}
???????/* E[attr|=val]表示的要么是一个单独的属性值，要么这个属性值是以-分隔开的 */
???????.attr3 a[class|="download"] {
???????????color: aquamarine;
???????}
???????/* E[attr*=val]表示的是只要属性值里包含val字符即可，可在任意位置 */
???????.attr4 a[class*="download"] {
???????????color: aquamarine;
???????}
???????/* E[attr^=val]表示的是属性值里包含val字符并且在开始位置 */
???????.attr5 a[class^="download"] {
???????????color: aquamarine;
???????}
???????/* E[attr$=val]表示的是属性值里包含val字符并且在结束位置 */
???????.attr6 a[class$="download"] {
???????????color: aquamarine;
???????}
???</style>
</head>
<body>
<div class="wapper">
???<header>CSS3-属性选择器</header>
???<section class="attr1">
???????<a href=".a/sfdf" class="moviedownload">下载</a>
???????<a href=".b/sfdf" class="moviedownload">下载</a>
???????<a href=".c/sfdf" class="moviedownload">下载</a>
???</section>
???<section class="attr2">
???????<a href=".a/sfdf" class="moviedownload">下载</a>
???????<a href=".b/sfdf" class="download movie">下载</a>
???????<a href=".c/sfdf" class="download download-movie">下载</a>
???</section>
???<section class="attr3">
???????<a href=".a/sfdf" class="download">下载</a>
???????<a href=".b/sfdf" class="download·movie">下载</a>
???????<a href=".c/sfdf" class="download-movie">下载</a>
???</section>
???<section class="attr4">
???????<a href=".a/sfdf" class="download">下载</a>
???????<a href=".b/sfdf" class="download·movie">下载</a>
???????<a href=".c/sfdf" class="download-movie">下载</a>
???????<a href=".c/sfdf" class="moviedownload">下载</a>
???</section>
???<section class="attr5">
???????<a href=".a/sfdf" class="download">下载</a>
???????<a href=".b/sfdf" class="download·movie">下载</a>
???????<a href=".c/sfdf" class="download-movie">下载</a>
???????<a href=".c/sfdf" class="moviedownload">下载</a>
???</section>
???<section class="attr6">
???????<a href=".a/sfdf" class="download">下载</a>
???????<a href=".b/sfdf" class="download·movie">下载</a>
???????<a href=".c/sfdf" class="download-movie">下载</a>
???????<a href=".c/sfdf" class="moviedownload">下载</a>
???</section>
</div>
</body>
</html>
CSS3属性选择器
原文地址：https://www.cnblogs.com/zlinger/p/9515122.html