CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

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>基础教程(nhooo.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>基础教程(nhooo.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选择器参考手册