CSS [attribute|=value] 选择器

CSS完整选择器完整CSS选择器参考手册

选择一个lang属性的起始值="en"的所有元素

<!DOCTYPE html>
<html>
<head>
  <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>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>

</body>
</html>

尝试一下 »

定义和用法

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

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

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

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

相关文章

CSS 教程: CSS 属性选择器

更多实例


选择一个class属性的起始值="top"的所有元素：

<!DOCTYPE html>
<html>
<head>
  <style>
    [class|=top] {
      background: yellow;
    }
  </style>
</head>

<body>
  <h1 class="top-header">Welcome</h1>
  <p class="top-text">Hello world!</p>
  <p class="content">Are you learning CSS?</p>

  <p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>

</body>
</html>

尝试一下 »

CSS完整选择器完整CSS选择器参考手册