css属性选择器语法：
[attribute=value] 如：[target=-blank] /*选择所有使用target=\"-blank\"的元素*/
或
[attribute~=value] 如：[ ~=flower] /*选择标题属性包含单词\"flower\"的所有元素*/
或
[attribute|=language] 如：[lang|=en] /*选择一个lang属性的起始值=\"EN\"的所有元素*/
css属性选择器实例一：
选择所有使用target="_blank"的a元素
<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank]
{
background-color:yellow;
}
</style>
</head>
<body>
<p>The 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>
css属性选择器实例二：
选择标题属性包含单词"flower"的所有元素
<!DOCTYPE html>
<html>
<head>
<style>
[ ~=flower]
{
border:5px solid yellow;
}
</style>
</head>
<body>
<p>The image with the attribute containing the word \"flower\" gets a yellow border.</p>
<img src=\"/images/online_demo/klematis.jpg\" =\"klematis flower\" />
<img src=\"/images/online_demo/klematis.jpg\" =\"flowers\" />
<img src=\"/images/online_demo/klematis.jpg\" =\"landscape\" />
<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>
css属性选择器实例二：
选择一个lang属性的起始值="en"的所有元素
<!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>
相关阅读：
继续阅读与本文标签相同的文章
-
Y5T289 Infinera今年ECOC推出点对多点相干光模块
2026-05-14栏目： 教程
-
快捷键只懂用复制粘贴？你该进修了，最全Excel快捷键合集
2026-05-14栏目： 教程
-
全网“云南旅游”相关搜索流量排名TOP100 全网“云南旅游”相关搜索流量排行榜
2026-05-14栏目： 教程
-
扎克伯格：现在的首要任务是实施FTC强制实施的隐私计划
2026-05-14栏目： 教程
-
如果 5G 覆盖以后，是否可以将处理器从手机上撤掉？
2026-05-14栏目： 教程