类引用前的*是什么意思？

I have code like below:

我有如下代码:

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

I want to know what does *max-height--xxl mean here?

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

This is a different question to wildcard * in CSS for classes

对于类,CSS中的通配符*是一个不同的问题

I want to ask the * prefix in html class reference.

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

2 个解决方案

#1

Nothing in a global sense. In HTML5 there are no restrictions on what characters a class attribute can contain (with the exception of the space character, which is used to separate multiple classes).

没有全球意义上的东西。在HTML5中,对类属性可以包含的字符没有限制(空格字符除外,用于分隔多个类)。

For instance, the following HTML is valid:

例如,以下HTML有效:

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

Here foo is one class, %foo is a second unrelated class and 'foo is a third unrelated class.

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

The following is also valid:

以下内容也有效:

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

The HTML5 specification states that the class attribute must be a set of space-separated tokens. It goes on to define these as:

HTML5规范声明class属性必须是一组以空格分隔的标记。它继续将这些定义为:

A set of space-separated tokens is a string containing zero or more words (known as tokens) separated by one or more space characters, where words consist of any string of one or more characters, none of which are space characters.

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

It's worth noting that these symbols will possibly need escaping (by prefixing them with the a backslash (\) character) in order to be targeted by a CSS selector.

值得注意的是,这些符号可能需要转义(通过在它们前面添加反斜杠(\)字符),以便被CSS选择器作为目标。

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

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

#2

It doesn't mean anything special. The class name just begins with a * character.

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

It might be a hack designed to change the class name and, effectively, comment it out so it no longer matches a CSS selector.

它可能是一个设计用于更改类名的黑客,并且有效地将其注释掉,因此它不再与CSS选择器匹配。

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>

#1