css不同数字自动加不同颜色

CSS是前端开发中的重要技术，它可以让我们创建层叠样式表。其中一个有趣的特性就是不同数字自动加不同颜色。比如说，数字1会被自动设置为红色，数字2会被设置为绿色，数字3会被设置为蓝色。这种自动设置颜色的方式可以让网页更加丰富多彩，让数字更突出。

 p{
        font-size: 2rem;
    }
    p::before{
        content: attr(data-number);
        font-weight:bold;
        color: rgb(var(--${1}));/* --1表示数字1，--2表示数字2，以此类推*/
    }
    p[data-number="1"]::before{
        --1: 255,0,0;
    }
    p[data-number="2"]::before{
        --2: 0,255,0;
    }
    p[data-number="3"]::before{
        --3: 0,0,255;
    } 

上述代码中，我们创建了一个p标签，并通过data-number属性设置数字。接着在CSS代码中，使用伪元素::before将数字添加到p标签前面，并应用了font-weight和color属性。其中，--1、--2和--3表示数字1、数字2和数字3。当p标签中的data-number属性为1时，我们设置--1为255,0,0（红色），以此类推。这样，在HTML代码中，我们只需要设置data-number属性的值，即可让数字自动加上对应的颜色。

总之，通过CSS的特性，我们可以让数字自动加上不同的颜色，从而更好地呈现网页内容。除了上述代码外，我们还可以根据需要设置其他数字自动加上不同的颜色，以满足更加多样化的网页设计需求。