标签：utf-8 结束 选择器 load 位置 doc htm down set
<!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>
标签：utf-8 结束 选择器 load 位置 doc htm down set
原文地址：https://www.cnblogs.com/zlinger/p/9515122.html
