定属性选择类型最后为您介绍特定属性选择器。请看下面的例子：

原创于 2015-06-01 12:50:08 发布 · 125 阅读

CC 4.0 BY-SA版权

本文深入探讨了HTML属性选择器与CSS规则的应用，包括如何通过属性选择器匹配特定元素，以及如何利用CSS实现复杂的选择与样式设置。具体展示了通过`[att|="val"]`选择器匹配包含特定属性值的元素，并提供了实践示例。同时，文章还强调了属性选择器在匹配语言标签方面的重要应用。

*[lang|="en"] {color: red;}

上面这个规则会选择 lang 属性等于 en 或以 en- 开头的所有元素。因此，以下示例标记中的前三个元素将被选中，而不会选择后两个元素：

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

一般来说，[att|="val"] 可以用于任何属性及其值。

假设一个 HTML 文档中有一系列图片，其中每个图片的文件名都形如 figure-1.jpg 和 figure-2.jpg。就可以使用以下选择器匹配所有这些图像：

img[src|="figure"] {border: 1px solid gray;}

当然，这种属性选择器最常见的用途还是匹配语言值。