首页 > Web开发 > 详细

CSS3属性选择器

时间:2018-08-21 23:46:31      阅读:165      评论:0      收藏:0      [点我收藏+]
<!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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!