CSS 属性 选择器
CSS 属性 选择器
CSS 2 引入了属性选择器。
属性选择器可以根据元素的属性及属性值来选择元素。
(1)[att*=val]; (2)[att^=val];(3)[att$=val];
1： [att*=val];解释：如果元素用att表示的属性之属性值中包含用val指定的字符的话，则该元素使用这个样式.
<html>
<head>
<style>
[id*=section]{
background-color:red;
}
</style>
</head>
<body>
<p id="sections9999">
</p>
</body>
</html>运行效果：除了ie其他均能正常显示。。
2:[att^=val];解释：如果元素用att表示的属性之属性值的开头为用val指定的字符的话，则该元素使用这个样式。(其实你可以这样理解在正则里面^匹配开头嘛所以喽。。)
运行效果：除了ie其他均能正常显示。。
3:[att$=val];解释：如果元素用att表示的属性之属性值的结尾为用val指定的字符的话，则该元素使用这个样式。(在正则里面$匹配结尾。。)
运行效果：除了ie其他均能正常显示。。
下面再看一个例子:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style>
a[href$=\/]:after,a[href$=html]:after,a[href$=htm]:after{
content:"web网页";
color:red;
}
a[href$=jpg]:after{
content:"JPG图像素材";
color:green;
}
</style>
</head>
<body>
<ul>
<li><a href="#">博客</a></li>
<li><a href="#">css选择器</a></li>
<li><a href="#">图像素材</a></li>
</ul>
</body>
</html>运行效果：除了ie其他均能正常显示。。
phpcn_u87
这个跟前面的没啥太大区别
8年前 添加回复 0