表示带有以 attribute 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode编码为U+002D）开头。典型的应用场景是用来来匹配语言简写代码（如zh-CN，zh-TW可以用zh作为value）。
选择 lang 属性值以 "en" 开头的元素，并设置其样式：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(cainiaoplus.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>菜鸟教程(cainiaoplus.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>测试看看 ‹/›