将自定义 CSS 选择器连接在一起

Question

我之前有过这个工作，我已经弄明白了。

但是我忘记保存了

我知道我很难弄清楚，但我不记得我做了什么。

我想通了这部分。 https://jsfiddle.net/39ph4bvs/9/

我在这里做错了，但我似乎无法理解我做错了什么。

我不知道如何修复 CSS。

我想弄清楚如何做到这一点，我的头很痛。

只有 CSS 搞砸了。

我所做的就是添加自定义 css 选择器，这让我很为难。

忽略视频，这只是自定义 css 选择器，我正试图开始工作。 css 选择器与视频无关。我不需要视频方面的帮助，我需要实现自定义 css 选择器方面的帮助。

我觉得这部分我还可以。

这部分好

.bg1 {
  --color-a: linear-gradient(120deg, #155799, #159957);
}

.bg2 {
  --color-b: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg3 {
  --color-c: linear-gradient(45deg, #102eff, #d2379b);
}

.bg4 {
  --color-d: linear-gradient(90deg, #360033 30%, #0b8793 100%);
}

.bg5 {
  --color-e: linear-gradient(115deg, #0a0e88, #00b1ce);

}

.bg6 {
  --color-f: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg7 {
  --color-g: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg8 {
  --color-h: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

.bg9 {
  --color-i: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}

我卡在这里了：

我不知道为什么我的脑袋对如何做到这一点感到困惑。

错误

body {
  background-image:
    linear-gradient(var(--color-a)),
    linear-gradient(var(--color-b)),
    linear-gradient(var(--color-c)),
    linear-gradient(var(--color-d)),
    linear-gradient(var(--color-e)),
    linear-gradient(var(--color-f)),
    linear-gradient(var(--color-g)),
    linear-gradient(var(--color-h)),
    linear-gradient(var(--color-i));
  background-repeat: no-repeat;
}

那部分完全错了。我不知道如何解决它。有写法的，不知道怎么写。

这是我的第二次尝试：https://jsfiddle.net/qsb2kvca/2/

我这里有一个工作版本，但我仍然很困惑。 https://jsfiddle.net/g9h4xLsv/

我不知道为什么我的脑袋想不通。

错误

body {
  background-image:
    (var(--color-a)),
    (var(--color-b)),
    (var(--color-c)),
    (var(--color-d)),
    (var(--color-e)),
    (var(--color-f)),
    (var(--color-g)),
    (var(--color-h)),
    (var(--color-i));
  background-repeat: no-repeat;
}

那部分完全错了。我不知道如何解决它。有写法的，不知道怎么写。

这是我的第三次尝试：https://jsfiddle.net/8b0msnkL/3/

错误

body {
  background-image:
    linear-gradient(var(--color-a), var(--color-a)),
    linear-gradient(var(--color-b), var(--color-b)),
    linear-gradient(var(--color-c), var(--color-c)),
    linear-gradient(var(--color-d), var(--color-d)),
    linear-gradient(var(--color-e), var(--color-e)),
    linear-gradient(var(--color-f), var(--color-f)),
    linear-gradient(var(--color-g), var(--color-g)),
    linear-gradient(var(--color-h), var(--color-h)),
    linear-gradient(var(--color-i), var(--color-i));
  background-repeat: no-repeat;
}

那部分完全错了。我不知道如何解决它。有写法的，不知道怎么写。

我尝试将此处的代码减少到 1 行：

https://jsfiddle.net/8b0msnkL/6/

这似乎没有帮助。

错误

.bg1 {
  --color-a: linear-gradient(120deg, #155799, #159957);
}

body {
  background-image:
    linear-gradient(var(--color-a), var(--color-a));
  background-repeat: no-repeat;
}

那部分完全错了。我不知道如何解决它。有写法的，不知道怎么写。

Answer 1

那个？

:root {
  --color-a: linear-gradient(120deg, #155799,     #159957      );
  --color-b: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% );
  --color-c: linear-gradient( 45deg, #102eff,     #d2379b      );
  --color-d: linear-gradient( 90deg, #360033 30%, #0b8793 100% );
  --color-e: linear-gradient(115deg, #0a0e88,     #00b1ce      );
  --color-f: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% );
  --color-g: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% );
  --color-h: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% );
  --color-i: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% );
  }
body {
  background-image: var(--color-a);
  }

PO : Can you show me it working in the code?

(()=> //  === randomBackground == IIFE  
  {
  let colorOn = colorN = 0;
  setInterval(() =>
    {
    while (colorOn === colorN)
      colorN = Math.floor(Math.random() * 6);
    colorOn = colorN
    document.body.style.setProperty('--colorX', `var(--color-${colorOn})`)
    }
    , 5000);  // change backGround every 5 seconds
  }
 )()

:root {
  --color-0: linear-gradient(120deg, #155799,     #159957      );
  --color-1: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% );
  --color-2: linear-gradient( 45deg, #102eff,     #d2379b      );
  --color-3: linear-gradient( 90deg, #360033 30%, #0b8793 100% );
  --color-4: linear-gradient(115deg, #0a0e88,     #00b1ce      );
  --color-5: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% );
  --color-6: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% ); /* same as 5 */
  --color-7: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% ); /* same as 5 */
  --color-8: linear-gradient(  0deg, #522db8  0%, #1c7ce0 100% ); /* same as 5 */

  --colorX: var(--color-0);
  }
body {
  background-image : var(--colorX);
  height           : 100vh;
  margin           : 0;
  }

没有setInterval

let colorRandom = 'var(--color-' + Math.floor(Math.random() *9) + ')'
document.body.style.setProperty('--colorX',colorRandom)

将自定义 CSS 选择器连接在一起

Connecting the custom CSS selectors together

css

css-selectors