html - CSS 属性选择器以无属性名称开头

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

Can this be done without an attribute name?

虽然答案不太漂亮，但缺点是不，但它不能 - 不是按照您建议的方式。

---

引用文献:

W3 Attribute Selectors Specification

[att] Represents an element with the att attribute, whatever the value of the attribute.

[att=val] Represents an element with the att attribute whose value is exactly "val".

[att~=val] Represents an element with the att attribute whose value is a whitespace-separated list of words, one of which is exactly "val". If "val" contains whitespace, it will never represent anything (since the words are separated by spaces). Also if "val" is the empty string, it will never represent anything.

[att|=val] Represents an element with the att attribute, its value either being exactly "val" or beginning with "val" immediately followed by "-" (U+002D). This is primarily intended to allow language subcode matches (e.g., the hreflang attribute on the a element in HTML) as described in BCP 47 ([BCP47]) or its successor. For lang (or xml:lang) language subcode matching, please see the :lang pseudo-class.

---

W3 General Selectors Specification

The following table summarizes the Selector syntax:

...

[Provides documentation of all valid selectors, omitting any mention of wildcard attribute selectors]

...