css属性选择器语法：
1 2 3 4 5 | <code>[attribute=value] 如：[target=-blank]
或
[attribute~=value] 如：[title~=flower]
或
[attribute|=language] 如：[lang|=en] </code>
|
登录后复制
css属性选择器实例一：
选择所有使用target="_blank"的a元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <code class="html"><!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank]
{
background-color:yellow;
}
</style>
</head>
<body>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="http://www.manongjc.com">manongjc.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
<p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html></code>
|
登录后复制
在线运行
立即学习“前端免费学习笔记（深入）”；
css属性选择器实例二：
选择标题属性包含单词"flower"的所有元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <code class="html"><!DOCTYPE html>
<html>
<head>
<style>
[title~=flower]
{
border:5px solid yellow;
}
</style>
</head>
<body>
<p>The image with the title attribute containing the word "flower" gets a yellow border.</p>
<img src="/images/online_demo/klematis.jpg" title="klematis flower" / alt="css 属性选择器 - 根据html元素的name属性值选择改元素" >
<img src="/images/online_demo/klematis.jpg" title="flowers" / alt="css 属性选择器 - 根据html元素的name属性值选择改元素" >
<img src="/images/online_demo/klematis.jpg" title="landscape" / alt="css 属性选择器 - 根据html元素的name属性值选择改元素" >
<p><b>Note:</b> For [<i>attribute</i>~=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html></code>
|
登录后复制
在线运行
立即学习“前端免费学习笔记（深入）”；
css属性选择器实例二：
选择一个lang属性的起始值="en"的所有元素
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <code class="html"><!DOCTYPE html>
<html>
<head>
<style>
[lang|=en]
{
background:yellow;
}
</style>
</head>
<body>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>
<p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
</body>
</html></code>
|
登录后复制
在线运行
立即学习“前端免费学习笔记（深入）”；
相关阅读：
css选择器
308
收藏
