是否可以创建一个带有数字“from-to”的css类名？答案

【问题标题】：Is possible create a css class name with numbers "from-to"?是否可以创建一个带有数字“from-to”的css类名？
【发布时间】：2022-09-23 19:19:15
【问题描述】：

我需要有 3 个课程如下：

.class-4, .class-5, .class-6 {
    color: pink;
}

而且效果很好。假设我需要相同但为 100：

.class-4, .class-5, .... .class-100 {
    color: pink;
}

有没有类似的东西或任何其他我可以使用的方法来做到这一点。

.class->3<101 {
    color: pink;
}

不用写 97 次类和逗号就可以得到相同的结果？

什么情况下需要这么多单独的课程？无论如何尝试[class^=\"class-\"]
如果你发现自己为相同的风格编写了 100 个类，那么你需要重新考虑你的逻辑。需要解决其他问题，而不是寻找解决方法。
从 php 函数编号的许多图像，根据图像的数量需要不同的大小，例如 1 到 4 宽 800px、5 到 12 400px、13 到 29 200px 等等直到 100，所以不是 100 相同，而是许多课程要重复。请解释一下 [class^=\"class-\"]
许多图像从一个php函数编号，根据图像的数量需要不同的大小--> 这是需要修复的，您的 PHP 函数可以生成更好的 HTML 标记。更新了你的 PHP 函数的逻辑，不要试图在 CSS 中实现这个逻辑
在这个项目中，我不允许修改 php

标签： html css

【解决方案1】：

纯 CSS 中没有任何东西可以做到这一点，但是您可以使用 JavaScript 为您创建一个样式表，它会自动创建所有繁琐的重复。

在这个 sn-p 中，您说明类范围的末端是什么，以及在每个范围中要放置什么样式。

如果有一个您不想更改的范围，那么您仍然需要包含它，但使其样式字符串只是一个空字符串。

sn-p 遍历创建相关样式表条目的每个范围，并将它们放在文档头部元素中的样式元素中。

这里显示了一些相当随机的 div，只是为了测试我们是否达到了正确的范围。

const rangeEnds = [4, 20, 35, 41, 48, 100];
const styles = ['color: pink;', 'color: red; background-color: black;', 'color: green;', 'color: yellow;', 'color: blue;', 'color: black; background: pink;'];

let lastRangeEnd = 0;
const styleEl = document.createElement('style');
for (let i = 0; i < rangeEnds.length; i++) {
  for (let j = lastRangeEnd + 1; j < rangeEnds[i]; j++) {
    styleEl.innerHTML += '.class-' + j + ',';
  }
  styleEl.innerHTML += '.class-' + rangeEnds[i] + '{' + styles[i] + '}';
  lastRangeEnd = rangeEnds[i];
}
document.querySelector('head').append(styleEl);

<!doctype html>
<html>

<head>
  <title>Classes</title>
</head>

<body>
  <div class="class-1">ABCD</div>
  <div class="class-19">ABCD</div>
  <div class="class-21">ABCD</div>
  <div class="class-40">ABCD</div>
  <div class="class-41">ABCD</div>
  <div class="class-48">ABCD</div>
  <div class="class-100">ABCD</div>
</body>

【讨论】：

很好的解决方案，无论如何感谢大家的一般学习

【解决方案2】：

如果所有元素都具有相同的属性，即 {color:pink} 您只能创建一个类（让我们称之为 .pink）

.pink {
    color: pink;
}

然后你可以简单地给你的元素 .pink 类。

【讨论】：

您好，您应该改写您的答案，因为您的建议不被理解；）

【解决方案3】：

class 属性的主要目的之一是定义共享样式引用名称。想要引用多个 class 引用并让它们共享相同的样式并不是一个很好的做法。

解决这个问题的最好方法是使用一个通用的class 属性名称YourClassName。这样，您希望应用样式的任何元素都可以通过 element.classList.add(YourClassName) 使用 JS 将该类附加到其 class 属性。而且，这将解决不得不担心放置多个类名的所有麻烦，而且我想不出任何一种情况会迫使您声明每个元素类用逗号分隔，前提是它们要接收相同的样式。

【讨论】：

【解决方案4】：

OP 询问是否可以在共享相同名称但以 1、2、3 等结尾的 CSS 类的末尾有一个“数字范围”（数组）。

正如@zer00ne 指出的那样；您可以使用一个“类”来定位多个类。定义类选择器时 - 省略数字，但使类名唯一。

所以，如果类名是my-row-class-1、my-row-class-2等，就这样写选择器；

[class^="my-row-class-"] {
    color: pink;
}

专业提示：除了对类使用“开头为”^ 选择器外，还可以对 id^= 执行此操作，等等。查看MDN web docs 了解更多信息。

【讨论】：