表示帶有以 attribute 命名的屬性的元素，屬性值為“value”或是以“value-”為前綴（"-"為連字符，Unicode編碼為U+002D）開頭。典型的應(yīng)用場(chǎng)景是用來來匹配語言簡(jiǎn)寫代碼（如zh-CN，zh-TW可以用zh作為value）。
選擇 lang 屬性值以 "en" 開頭的元素，并設(shè)置其樣式：
<!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>測(cè)試看看 ?/?[attribute|=value] 選擇器用于選擇以指定值開頭的屬性值的元素。
注意:該值是整個(gè)單詞，無論是單獨(dú)像 lang="en"，或者像連字符 - 如 lang=en-us 都可以。
IEFirefoxOperaChromeSafari
所有主流瀏覽器都支持[attribute|=value]選擇器。
注意: [attribute|=value]在IE8中運(yùn)行，必須聲明<!DOCTYPE>
CSS 教程: CSS 屬性選擇器
選擇一個(gè) class 屬性 以 top 為開頭的所有元素，并設(shè)置為紅色：
<!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>測(cè)試看看 ?/?