CSS [attribute~=value] 选择器
实例
选择 titile
属性包含单词 "flower" 的元素,并设置其样式:
<!DOCTYPE html>
<html>
<head>
<style>
[title~=flower] {
border: 5px solid yellow;
}
</style>
</head>
<body>
<p>标题属性包含单词“flower”的 img 将获得黄色边框。</p>
<img src="/images/klematis.jpg" title="klematis flower" width="150" height="113">
<img src="/images/img_flwr.gif" title="flowers" width="224" height="162">
<img src="/images/landscape.jpg" title="landscape" width="160" height="120">
</body>
</html>
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
选择器 | |||||
---|---|---|---|---|---|
[attribute~=value] | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
注释:对于 IE8 及更早版本的浏览器中的 element>element,必须声明 <!DOCTYPE>。
定义和用法
[attribute~=value]
选择器用于选取属性值中包含指定词汇的元素。
相关页面
CSS 教程:CSS 属性选择器