多个属性值 | CSS-Tricks

元素可以有多个类名。例如

<div class="module accordion expand"></div>

然后在 CSS 中，您可以根据其中的任何一个匹配该元素

/* All these match that */
.module { }
.accordion { }
.expand { }

您可以将选择器限制为仅在其中几个存在时匹配，例如

// Will only match if element has both
.accordion.expand { }

但是其他属性呢？

类名在上面概述的功能中是唯一的。其他属性不会因为它们包含空格而被视为“多个值”。例如

<div data-type="module accordion expand"></div>

此元素只有一个 data-type 属性，其值为“module accordion expand”，而不是三个唯一的值“module”、“accordion”和“expand”。但假设我们想要能够像使用类名一样根据各个值选择元素。

我们可以通过使用“*”子字符串匹配属性选择器来实现，它将匹配如果提供的字符串出现在值中的任何位置

[data-type*="module"] {

}

或仅在存在多个特定“值”时匹配

[data-type*="accordion"][data-type*="expand"] {

}

最好使用空格分隔的选择器（例如 [data-type~="expand"]）。这样，当您不希望匹配“expander”时，您就不会被类似于“expand”的匹配所困扰。

[data-type~="accordion"][data-type~="expand"] {

}

查看演示

在 IE7+ 中有效（因为 IE 7 是第一个支持属性选择器的 IE）

Julian Cizmic

# 2011 年 12 月 18 日

很酷！

Jan-Marten de Boer

# 2011 年 12 月 18 日

Chris，你会在你的网站中使用这个吗？我可以看到将数据属性与 JavaScript 结合使用，但为数据属性制作 CSS 选择器看起来很奇怪。它必须在某种程度上是通用的，并且在我看来，很容易作为类实现。由于 CSS 类甚至同一选择器中的多个类的兼容性远远早于数据属性，因此它也更加可靠。

了解你，进行各种超前沿的开发，也许这样做有一个特殊的原因。我只是在你的文章中没有看到任何地方提到。你想开导我们吗？

Chris Coyier

评论永久链接# 2011 年 12 月 18 日
我尝试写了三、四遍这篇文章。它的来源是我试图弄清楚使用连字符分隔的属性选择器有什么用，例如 [rel|=value]。这似乎没什么用，尤其是在它只会匹配以“value-”开头的属性的情况下。这意味着 [rel^=value] 也是一样有用。我实在想不出一个使用它的例子。

我想到如何在元素上使用像“module-a”和“module-b”这样的类，并且能够将它们一起选择和分开。
```
[class|=module] { /* shared characteristics */ }
.module-a { /* unique characteristics */ }
.module-b { /* unique characteristics */ }
```
但是，这也不是特别有用。特别是如果您使用多个类（例如 class=”module module-a”），您将获得更深层的浏览器支持。

然后我开始思考类，以及仅仅通过空格分隔它们如何有点像拥有多个唯一值，以及它是唯一类似的属性。

于是这些想法就融汇在一起，就有了这篇文章。

我会在实际项目中使用它吗？当然可以。坦白地说，我从未使用过，但如果需要的话我会使用。一个用例是，您正在使用数据属性来存储一些数据。比如在 data-geo 属性中存储地理坐标。并且您在页面上提供了地理搜索。您可以编写一个选择器，根据 data-geo 属性匹配元素，而无需添加任何额外的任意钩子来选择。
Scott Vivian

评论永久链接# 2011 年 12 月 19 日

“连字符分隔的属性选择器”专门设计用于语言属性。这个想法是匹配像 en、en-US、en-GB 等东西。

Hompimpa

# 2011 年 12 月 18 日

我从未想过空格会影响 CSS 选择器。（直到 html5 出现）。

Brendan

# 2011 年 12 月 18 日

Chris，你也可以使用 [att~=val] 选择器吗？从规范

表示具有 att 属性的元素，其值是空格分隔的单词列表，其中一个正好是“val”。如果“val”包含空格，它永远不会表示任何内容（因为单词以空格分隔）。如果“val”为空字符串，它也不会表示任何内容。

Chris Coyier

评论永久链接# 2011 年 12 月 18 日

是的！这显然更好。更新了文章。
Chris Coyier

评论永久链接# 2011 年 12 月 18 日

此外，更好的规范链接到未来：http://dev.w3.org/csswg/selectors4/#attribute-representation

BigAB

# 2011 年 12 月 18 日

当然，除了使用奇怪的空格方法之外，您还可以使用空格属性选择器 [att~=value]。

IE7+ 也支持，我相信：空格属性选择器示例

BigAB

评论永久链接# 2011 年 12 月 18 日

@Brendan 哈！当我开始打字时那里没有，我发誓。

Joe

# 2011 年 12 月 19 日

我一直都知道基本技巧——但我不知道你可以在属性选择器等东西上做到这一点！

Omer

# 2011 年 12 月 19 日

在决定 DreamWeaver 对于 JS 脚本根本不好用时，它确实可以提供帮助。

Federico / Bfred.it

# 2011 年 12 月 19 日

类选择器比属性选择器快得多，虽然这很有趣，但我无法想到在现实世界中你更喜欢使用 data-attributes 来设置样式而不是 classes 的情况。

Chris Coyier

评论永久链接# 2011 年 12 月 19 日

对此有一些数据吗？

Chris Hester

# 2011 年 12 月 19 日

在您的 CSS 示例中，要匹配两个类名（“.accordion.expand { }”），这是否只影响“accordion”直接后跟“expand”的情况？还是顺序无关紧要？

Chris Coyier

评论永久链接# 2011 年 12 月 19 日

顺序无关紧要

cnwtx

# 2011 年 12 月 19 日

id 属性是否也支持多个空格分隔的值？

Chris Coyier

评论永久链接# 2011 年 12 月 19 日

不：http://jsfiddle.net/chriscoyier/3qgwZ/
cnwtx

评论永久链接# 2011 年 12 月 19 日

嗯，猜错了。

Simone

# 2011 年 12 月 20 日

很棒的技巧！谢谢 Chris，继续努力！

Drew

# 2011 年 12 月 21 日

只是一个警告：在您的 css 和 jQuery 中使用 [attr=val] 类型选择器在大多数浏览器中可能非常慢，因为没有简单的快捷方式/查找表/方法（至少目前没有）。对于静态页面，这不是一个大问题，但如果您打算动态使用这些 css 类（即响应用户操作随着时间的推移添加和删除它们），您可能会遇到一些严重的减速。

我们通常不会考虑 css 规则的效率，但它们确实开始在复杂、动态的页面中很重要。尽可能地谨慎使用。

Bacha

# 2011 年 12 月 22 日

这真的很好，谢谢，我们可以在 div 的位置使用 span 吗？

Thierry Koblentz

# 2011 年 12 月 22 日

可能值得一提的是，在所有这些示例中，IE6 不会忽略第一个

.accordion.expand {…}

而是将其识别为

.expand {…}

paceaux

# 2011 年 12 月 22 日

我认为值得一提的是，属性选择器的特异性与类相同。因此，当您无法控制 HTML 时，使用多个属性方法作为绝佳的解决方案——例如生成的表单。

此评论线程已关闭。如果您有重要信息要分享，请联系我们。