是否可以在单选按钮的选中选择器被触发时更改CSS变量？

Question

我有以下的CodePen：用CSS变量测试LCD，当单击带有特定数字的标签时，将根据我确定的模拟BCD到7段显示解码器的代数方程，生成适当的LCD段，以模拟LCD显示.

我目前在CSS中提到了第一段的等式。在CSS中单击一个数字，理论上应该会产生一个脉冲(0或1)填充适当的四个--input变量，然后该方程根据该段的方程确定不透明度。

A部分(顶部部分)应修改如下：

• 0: on
• 1:关闭
• 2:开始
• 3:开始
• 4:关闭
• 5:开始
• 6:开始
• 7:开始
• 8:开始
• 9:开始

其中"on“是1的不透明度，"off”是0.05的不透明度。

但是，即使我们的初始默认值为0(这是打开的)，单击例如，1或4，不会改变段的不透明度.

代码在下面，有人能指出我做错了什么吗？事先非常感谢..。

HTML：

<div id="led-screen">
    <div class="digit">
        <div class="segment segment-a"></div>
        <div class="segment segment-b"></div>
        <div class="segment segment-c"></div>
        <div class="segment segment-d"></div>
        <div class="segment segment-e"></div>
        <div class="segment segment-f"></div>
        <div class="segment segment-g"></div>
    </div>
</div>
<div id="buttons">
    <label class="digit-button" for="digit-7">7</label>
    <label class="digit-button" for="digit-8">8</label>
    <label class="digit-button" for="digit-9">9</label>
    <label class="digit-button" for="digit-4">4</label>
    <label class="digit-button" for="digit-5">5</label>
    <label class="digit-button" for="digit-6">6</label>
    <label class="digit-button" for="digit-1">1</label>
    <label class="digit-button" for="digit-2">2</label>
    <label class="digit-button" for="digit-3">3</label>
    <label class="digit-button" for="digit-0">0</label>
    <input type="radio" name="digit-radio" id="digit-0" checked="checked"/>
    <input type="radio" name="digit-radio" id="digit-1" />
    <input type="radio" name="digit-radio" id="digit-2" />
    <input type="radio" name="digit-radio" id="digit-3" />
    <input type="radio" name="digit-radio" id="digit-4" />
    <input type="radio" name="digit-radio" id="digit-5" />
    <input type="radio" name="digit-radio" id="digit-6" />
    <input type="radio" name="digit-radio" id="digit-7" />
    <input type="radio" name="digit-radio" id="digit-8" />
    <input type="radio" name="digit-radio" id="digit-9" />
</div>

​

CSS：

:root {
    --input_0: 0; /* z */
    --input_1: 0; /* y */
    --input_2: 0; /* x */
    --input_3: 0; /* w */
    --led_r: 42;
    --led_g: 45;
    --led_b: 34;
    --led_o: 0;
    --led_o_base: 0.95;
    --led_o_offset: 0.05;
}

#led-screen {
    background-color: #b7ac90;
    width: 800px;
    height: 200px;
    display: block;
}

#digit-0:checked {
    --input_0: 0;
    --input_1: 0;
    --input_2: 0;
    --input_3: 0;   
}
#digit-1:checked {
    --input_0: 1;
    --input_1: 0;
    --input_2: 0;
    --input_3: 0;   
}
#digit-2:checked {
    --input_0: 0;
    --input_1: 1;
    --input_2: 0;
    --input_3: 0;   
}
#digit-3:checked {
    --input_0: 1;
    --input_1: 1;
    --input_2: 0;
    --input_3: 0;   
}
#digit-4:checked {
    --input_0: 0;
    --input_1: 0;
    --input_2: 1;
    --input_3: 0;   
}
#digit-5:checked {
    --input_0: 1;
    --input_1: 0;
    --input_2: 1;
    --input_3: 0;   
}
#digit-6:checked {
    --input_0: 0;
    --input_1: 1;
    --input_2: 1;
    --input_3: 0;   
}
#digit-7:checked {
    --input_0: 1;
    --input_1: 1;
    --input_2: 1;
    --input_3: 0;   
}
#digit-8:checked {
    --input_0: 0;
    --input_1: 0;
    --input_2: 0;
    --input_3: 1;   
}
#digit-9:checked {
    --input_0: 1;
    --input_1: 0;
    --input_2: 0;
    --input_3: 1;   
}

.digit {
    width: 75px;
    height: 150px;
    float: right;
    margin-right: 50px;
    margin-top: 10px;
    transform: skew(-5deg);
}

.segment-a {
    position: relative;
    left: 0;
    top: 0;
    --led_o: calc(((2 * var(--input_3) * var(--input_2) * var(--input_1) * var(--input_0)) - (2 * var(--input_3) * var(--input_2) * var(--input_0)) - (var(--input_3) * var(--input_1) * var(--input_0)) - (var(--input_3) * var(--input_1)) + (var(--input_3) * var(--input_0)) - (2 * var(--input_2) * var(--input_1) * var(--input_0)) + (var(--input_2) * var(--input_1)) + (2 * var(--input_2) * var(--input_0)) - var(--input_2) + (var(--input_1) * var(--input_0)) - var(--input_0) + 1) * var(--led_o_base) + var(--led_o_offset));
    background-color: rgba(var(--led_r), var(--led_g), var(--led_b), var(--led_o));
    /* 2wxyz-2wxz-wyz-wy+wz-2xyz+xy+2xz-x+yz-z+1 */
}
.segment-b {
    position: relative;
    transform: rotate(90deg);
    left: 41px;
    top: 21px;
}
.segment-c {
    position: relative;
    transform: rotate(90deg);
    left: 41px;
    top: 83px;
}
.segment-d {
    position: relative;
    left: 0;
    top: 104px;
}
.segment-e {
    position: relative;
    transform: rotate(90deg);
    left: -41px;
    top: 43px;
}
.segment-f {
    position: relative;
    transform: rotate(90deg);
    left: -41px;
    top: -59px;
}
.segment-g {
    position: relative;
    left: 0;
    top: -38px;
}

.segment {
    width: 60px;
    height: 20px;
}

Answer 1

使用您的实际代码，这是不可能的。来自规格说明

自定义属性是普通属性，因此它们可以被声明在任何元素上，用解析正常继承和级联规则，可以用@media和其他条件规则进行条件化，可以在HTML的样式属性中使用，也可以使用来读取或设置。

正如您所读到的，自定义属性(即CSS变量)是普通属性，因此如果没有父/子关系来使用继承，则不能在不同元素之间共享值。

为了更好地理解这个问题，下面是一个基本的例子：

​

:root {
  --c:red;
}

.box {
  /* --c:blue (uncomment this to change the color)*/
}

.element {
  background:var(--c);
  height:50px;
}

.extra {
  --c:green; /* this will do nothing */
}

<div class="box">
  <div class="element"></div>
</div>
<div class="extra"></div>

​

在上面的示例中，在extra中更改自定义属性将不会改变element (这相当于您的输入元素)。如果在box中更改值，可以影响element，因为它是父元素，我们将继承。

获得所需内容的唯一方法是确保您有一个父/子关系，以便能够更改该属性。

下面是一个简化的示例，您可以根据需要进行调整：

​

:root {
  --a:0;
  --b:0;
  --c:0;
}

.wrapper > div{
  height:50px;
  width:50px;
  display:inline-block;
  margin:10px;
}

.a {
  background:rgb(calc(var(--a)*255),0,0);
}
.b {
  background:rgb(calc(var(--b)*255),calc(var(--b)*255),0);
}
.c {
  background:rgb(calc(var(--c)*255),0,calc(var(--c)*255));
}


#n1:checked ~ .wrapper {
  --a:0;
  --b:0;
  --c:1;
}
#n2:checked ~ .wrapper {
  --a:0;
  --b:1;
  --c:0;
}

#n3:checked ~ .wrapper {
  --a:0;
  --b:1;
  --c:1;
}

#n4:checked ~ .wrapper {
  --a:1;
  --b:0;
  --c:0;
}
#n5:checked ~ .wrapper {
  --a:1;
  --b:0;
  --c:1;
}

<input type="radio" name="change" id="n1" >
<input type="radio" name="change" id="n2" >
<input type="radio" name="change" id="n3" >
<input type="radio" name="change" id="n4" >
<input type="radio" name="change" id="n5" >
<div class="wrapper">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>

​

更新

下面是分段着色的完整示例：

​

:root {
  --s1:1;
  --s2:1;
  --s3:0;
  --s4:1;
  --s5:1;
  --s6:1;
  --s7:1;
}

.wrapper{
  height:150px;
  width:100px;
  display:block;
  margin:10px;
  background:
    linear-gradient(red,red) top         /100% calc(var(--s1)*20px),
    linear-gradient(red,red) bottom      /100% calc(var(--s2)*20px),
    linear-gradient(red,red) center      /100% calc(var(--s3)*20px),
    linear-gradient(red,red) top right   /calc(var(--s4)*20px) 50%,
    linear-gradient(red,red) top left    /calc(var(--s5)*20px) 50%,
    linear-gradient(red,red) bottom right/calc(var(--s6)*20px) 50%,
    linear-gradient(red,red) bottom left /calc(var(--s7)*20px) 50%;
  background-color:#000;
  background-origin:content-box;
  background-repeat:no-repeat;
  padding:20px;
}

#n1:checked ~ .wrapper {
  --s1:0;
  --s2:0;
  --s3:0;
  --s4:1;
  --s5:0;
  --s6:1;
  --s7:0;
}
#n2:checked ~ .wrapper {
  --s1:1;
  --s2:1;
  --s3:1;
  --s4:1;
  --s5:0;
  --s6:0;
  --s7:1;
}

#n3:checked ~ .wrapper {
  --s1:1;
  --s2:1;
  --s3:1;
  --s4:1;
  --s5:0;
  --s6:1;
  --s7:0;
}

#n4:checked ~ .wrapper {
  --s1:0;
  --s2:0;
  --s3:1;
  --s4:1;
  --s5:1;
  --s6:1;
  --s7:0;
}
#n5:checked ~ .wrapper {
  --s1:1;
  --s2:1;
  --s3:1;
  --s4:0;
  --s5:1;
  --s6:1;
  --s7:0;
}

#n6:checked ~ .wrapper {
  --s1:1;
  --s2:1;
  --s3:1;
  --s4:0;
  --s5:1;
  --s6:1;
  --s7:1;
}

#n7:checked ~ .wrapper {
  --s1:1;
  --s2:0;
  --s3:0;
  --s4:1;
  --s5:0;
  --s6:1;
  --s7:0;
}
#n8:checked ~ .wrapper {
  --s1:1;
  --s2:1;
  --s3:1;
  --s4:1;
  --s5:1;
  --s6:1;
  --s7:1;
}

#n9:checked ~ .wrapper {
  --s1:1;
  --s2:1;
  --s3:1;
  --s4:1;
  --s5:1;
  --s6:1;
  --s7:0;
}

<input type="radio" name="change" id="n1" >1
<input type="radio" name="change" id="n2" >2
<input type="radio" name="change" id="n3" >3
<input type="radio" name="change" id="n4" >4
<input type="radio" name="change" id="n5" >5
<input type="radio" name="change" id="n6" >6
<input type="radio" name="change" id="n7" >7
<input type="radio" name="change" id="n8" >8
<input type="radio" name="change" id="n9" >9
<div class="wrapper">
  
</div>

​

有关问题以获取有关CSS变量范围的详细信息：CSS作用域自定义属性在外部作用域中用于calc var时被忽略。