是否可以创建一个带有数字"from-to“的css类名？
我需要3节课，如下：
.class-4, .class-5, .class-6 {
color: pink;
}而且效果很好。比方说，我需要同样的东西，但为了100：
.class-4, .class-5, .... .class-100 {
color: pink;
}有什么类似于这个或任何其他方法来做这个，我可以用。
.class->3<101 {
color: pink;
}为了得到相同的结果而不写97遍的类和逗号？
回答 4
Stack Overflow用户
发布于 2022-05-14 14:05:50
纯CSS中没有任何东西可以做到这一点，但是您可以使用JavaScript为您创建一个样式表，它会自动创建所有繁琐的重复操作。
在这个片段中，您将说明类范围的结束以及在每个范围中放置什么样式。
如果有一个范围你不想改变，那么你仍然需要包括它，但使它的样式字符串只是一个空字符串。
片段通过每个范围运行，创建相关的样式表条目，并将它们放在文档head元素中的样式元素中。
这里显示了一些相当随机的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>
Stack Overflow用户
发布于 2022-05-14 08:55:36
如果所有元素都具有相同的属性，即{color:粉红色}，则只能创建一个类(让我们称之为.pink)。
.pink {
color: pink;
}然后，您可以简单地为您的元素提供.pink类。
Stack Overflow用户
发布于 2022-05-14 11:44:37
class属性的主要目的之一是定义共享样式引用名。想要引用多个class引用并让它们共享相同的样式并不是一个很好的实践。
解决这个问题的最好方法是有一个公共的class属性名YourClassName。这样，您想要应用样式的任何元素都可以通过带有JS的class属性将该类附加到其element.classList.add(YourClassName)属性中。而且，这将解决所有需要担心放置多个类名的问题，我想不出任何1种情况都会迫使您声明由逗号分隔的每个元素类，条件是它们要接受相同的样式。
https://stackoverflow.com/questions/72238665
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号