第36章 CSS3中新增的属性选择器
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
[id*=section1]{ background:#0C0;}
[id*=section2]{ background:#9C0;}
[id*=section1-1]{ background:#CF0;}
*/
[id*=section]{ background:#F03;}
[id^=s]{ background:#0Fd;}
[id^=b]{ background:#00C;}
[id*=n]{ background:#0F0;}
[id$=c]{ background:#009;}
[id$=\-1]{ background:#FF0;}
[id$=_2]{ background:#F03;}
</style>
</head>
<body>
<h1>CSS3中的属性选择器</h1>
<div id="section1a">section1a</div>
<div id="section1-1">section1-1</div>
<div id="section1-1-1c">section1-1-1c</div>
<div id="section1-1-2d">section1-1-2d</div>
<div id="section1-2e">section1-2e</div>
<div id="section1-2-1">section1-2-1</div>
<div id="bsection2">section2</div>
<div id="section2-1">section2-1</div>
<div id="section2-2">section2-2</div>
<div id="section2_2">section2_2</div>
<div id="section2_2">section2_2</div>
<div id="section2_2">section2_2</div>
<div id="section2_3">section2-3</div>
</body>
</html> 效果图：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
a[href$=php]:after{
content:"[网站链接]";
color:#9F3;
}
a[href$=png]:after{
content:"[图片链接]";
color:#3F6;
}
</style>
</head>
<body>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="images/html5.png">网站图片</a><br>
<a href="images/html5.png">网站图片</a><br>
<a href="images/html5.png">网站图片</a><br>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="http://onestopweb.cn/index.php">网站首页</a><br>
<a href="images/html5.png">网站图片</a><br>
<a href="images/html5.png">网站图片</a><br>
</body>
</html>效果图：
相关推荐
somboy 2020-06-10
WinerChopin 2020-04-18
lanzhusiyu 2020-02-02
sorryericsson 2016-01-04
drdrsky 2016-01-04
afeichuanqi 2019-07-01
沉着前进 2019-06-29
nicepainkiller 2016-06-23
cscscssjsp 2016-01-04
Simagle 2016-01-04
wolaizheli 2014-10-09
83493467 2014-08-29
csscode 2014-08-11
lanzhusiyu 2014-08-11
xuzhen0 2014-07-25
zengni 2013-08-19
恋雨烟梦 2013-06-25
Cricket 2019-06-21