English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
indicating elements with attributes named "attribute", whose values are "value" or start with "value-"as a prefix ("-"as a hyphen, Unicode encoding is U+002D) Start. Typical application scenarios include matching abbreviated language codes (such as zh-CN, zh-TW can use 'zh' as value).
Complete CSS Selector Reference Manual
Select elements whose lang attribute value starts with "en" and set their style:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>/title>
<style>
[lang|=en]
{
background:yellow;
}
</style>
</head>
<body>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-<p lang="gb">Ello!</p>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>
<p><b>Attention:</b>If [<i>attribute</i>~=<i>value</i>] To be effective in IE8 and its earlier versions are effective, DOCTYPE is required to be declared.</p>
</body>
</html>Test and See ‹/›[attribute|=value] Selector is used to select elements whose attribute value starts with the specified value.
Note:This value is the entire word, whether it is alone like lang="en", or like hyphen - As lang=en-us can be.
IEFirefoxOperaChromeSafari
All major browsers support[attribute|=value]Selector.
Note: [attribute|=value]in IE8Running in IE, a declaration must be made<!DOCTYPE>
CSS Tutorial: CSS Attribute Selector
Select a class attribute that starts with 'top' for all elements and set them to red:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Tutorial(oldtoolbag.com)</title>/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>Test and See ‹/›