css3新增选择器(2)
1、查找属性值
<p>
<a href="">百度</a>
</p>
<p>
<a title="标题">百度</a>
</p>
css:
a[href] {
font-size: 30px;
color: aqua;
}
a[title] {
font-size: 30px;
color: red;
}
代码演示:
2、查找带有指定属性和值的元素—title=“百度一下”
<p><a href="https://www.baidu.com">百度一下</a></p>
<p><a href="https://www.baidu.com" title="百度一下">百度一下</a></p>
<p><a href="https://www.baidu.com">百度一下</a></p>
<p><a href="https://www.baidu.com" title="百度一下">百度一下</a></p>
css:
a[title='百度一下']{ color: bisque; font-size: 30px; }
代码演示:
3、 ^查找指定属性和值以指定某个内容开头的元素
<p><a href="http://www.baidu.com">百度一下</a></p>
css:
a[href^="http:"]{ color: blue; font-size: 40px; }
代码演示:
4、$ 查找指定属性和值,代表查找结束的字符
<p><a href="https://www.bilibili.com/">B站</a></p>
<p><a href="https://www.bilibili.com">B站2</a></p>
css:
a[href$="com/"]{ font-size: 50px; color: blueviolet; }
代码演示:
5、* 查找其中值包含的字符
<p><a href="https://fanyi.baidu.com/">百度翻译</a></p>
css:
a[href*="fanyi"]{ font-size: 70px; color: chartreuse; }
代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果