Question

我知道我们可以在给定属性名称的情况下选择以“foo”开头的属性。

div[class^="foo"]

这可以在没有属性名称的情况下完成吗？

div[^="foo"]

注意：

我知道我们可以这样做：

div[foo] {
  color: blue;
}

但就我而言，我正在尝试选择具有可变属性名称的内容：

foo-1 foo-2 等

div[^=foo] {
  color: red;
}

div[class^="foo"] {
  color: red;
}

<div foo>This text is not red</div>

<div class="foo">This text is red</div>

Answer 1

这可以在没有属性名称的情况下完成吗？

虽然答案不是很漂亮，但缺点是不，它不能 - 不是你建议的方式。

<强>参考：

W3 Attribute Selectors Specification

[ATT]   表示具有att属性的元素，无论属性的值是什么。

[ATT = VAL]   表示具有att属性的元素，其值正好是＆＃34; val＆＃34;。

[ATT〜= VAL]   表示具有att属性的元素，该属性的值是以空格分隔的单词列表，其中一个正好是＆＃34; val＆＃34;。如果＆＃34; val＆＃34;包含空格，它永远不会代表任何东西（因为单词用空格分隔）。如果＆＃34; val＆＃34;是空字符串，它永远不会代表任何东西。

[ATT | = VAL]   表示具有att属性的元素，其值正好是＆＃34; val＆＃34;或以＆＃34; val＆＃34;开头紧随其后的是＆＃34; - ＆＃34; （U + 002D）。这主要是为了允许语言子代码匹配（例如，HTML中的元素上的hreflang属性），如BCP 47（[BCP47]）或其后继者中所述。对于lang（或xml：lang）语言子代码匹配，请参阅：lang伪类。

W3 General Selectors Specification

下表总结了Selector语法：

...

[提供所有有效选择器的文档，省略任何通配符属性选择器的提及]

...

CSS属性选择器以没有属性名称开头

1 个答案: