类引用前的 * 是啥意思？

Posted 2023-03-06

【中文标题】类引用前的 * 是啥意思？

【英文标题】：what does an * before a class reference mean?类引用前的 * 是什么意思？

【发布时间】：2016-01-17 13:21:32

【问题描述】：

我有如下代码：

<div class="new-modal *max-height--xxl flex--0-1">

我想知道*max-height--xxl在这里是什么意思？

这是与wildcard * in CSS for classes不同的问题

我想问html类引用中的*前缀。

【问题讨论】：

wildcard * in CSS for classes的可能重复

@LaxmikantDange — 不。这是在谈论 CSS 而不是 HTML。

这个名字告诉我*max-height--xxl 类用于最大高度，也许你很少有名为*max-height--xl 或*max-height--L 的类用于指示最大高度选择器的设置？跨度>

【参考方案1】：

在全球范围内没有任何东西。在 HTML5 中，class 属性可以包含哪些字符没有限制（除了用于分隔多个类的空格字符）。

例如，以下 HTML 是有效的：

<figure class="foo bar baz %foo *bar _baz 'foo (bar )baz"></figure>

这里foo 是一个类，%foo 是第二个不相关的类，'foo 是第三个不相关的类。

以下也是有效的：

<figure class="%*_'()"></figure>

HTML5 规范规定class 属性必须是一组space-separated tokens。它继续将这些定义为：

一组以空格分隔的标记是包含零个或多个单词（称为标记）由一个或多个空格字符分隔的字符串，其中单词由一个或多个字符的任何字符串组成，其中没有一个是空格字符。

值得注意的是，这些符号可能需要转义（通过在它们前面加上反斜杠 (\) 字符）才能被 CSS 选择器定位。

.\%\*\_\'\(\) 
  color: red;

<figure class="%*_'()">
  Hello, world!
</figure>

【讨论】：

感谢您的回答！真的很感激！

【参考方案2】：

这并不意味着什么特别。类名以* 字符开头。

这可能是一种旨在更改类名并有效地将其注释掉以使其不再匹配 CSS 选择器的 hack。

var c = document.querySelector('div').classList;
var list = [];
for (var i = 0; i < c.length; i++) 
  list.push(c[i]);
;
document.body.innerHTML = list.join(" / ");

<div class="new-modal *max-height--xxl flex--0-1"></div>