编辑这个页面须要登录或更高权限！

CSS [attribute|=value] 选择器

表示带有以 attribute 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode编码为U+002D）开头。典型的应用场景是用来来匹配语言简写代码（如zh-CN，zh-TW可以用zh作为value）。

完整CSS选择器参考手册

在线示例

选择 lang 属性值以 "en" 开头的元素，并设置其样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(cainiaojc.com)</title> 
<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>注意:</b>如果 [<i>attribute</i>~=<i>value</i>] 要在 IE8 及其更早版本下起作用， DOCTYPE 是必须声明的。</p>

</body>
</html>
测试看看 ‹/›

定义和用法

[attribute|=value] 选择器用于选择以指定值开头的属性值的元素。

注意:该值是整个单词，无论是单独像 lang="en"，或者像连字符 - 如 lang=en-us 都可以。

浏览器兼容性

IEFirefoxOperaChromeSafari

所有主流浏览器都支持[attribute|=value]选择器。

注意: [attribute|=value]在IE8中运行，必须声明<!DOCTYPE>

相关文章

CSS 教程: CSS 属性选择器

在线示例

选择一个 class 属性 以 top 为开头的所有元素，并设置为红色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(cainiaojc.com)</title> 
<style>
[class|=top]
{
background:red;
color:white;
}
</style>
</head>

<body>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="content">Are you learning CSS?</p>
</body>
</html>
测试看看 ‹/›
完整CSS选择器参考手册
CSS 函数(Functions)CSS 选择器大全

CSS 参考手册
CSS @规则(RULES)
CSS 属性大全