html - CSS 变量赋值使用 CSS 选择和默认

Question

我有以下代码，我一直在将其作为 CSS/HTML 概念验证。

目的是在加载时通​​过默认选择的选项定义变量，或者在用户更改标签上选择的选项时定义变量。在选择或加载时，CSS 旨在获取为每个月定义的值，然后应用必要的算术并以二进制值的形式显示结果，以及通过calc()调用#result：风格之后。我不想对十进制值进行硬编码，因为以后可能会更改变量--m0，--m7并且我希望 CSScalc()完成所有繁重的工作。

不幸的是，无论用户选择的月份还是加载月份，该值仍会导致显示“00000000 = 0”而不是评论中描述的当前值，例如，如果选择了 9 月，则会看到“00000110 = 6”，或“00000001 = 1”表示一月，默认情况下设置为加载。

我几乎可以肯定有一种方法可以确保可以在选择新选项或加载页面时计算/重新计算这些值。有没有一种纯 CSS 的方法来做到这一点？我只能假设我的编码不正确，或者我的代码中遗漏了一些重要的东西......有人可以解释一下吗？

提前致谢。

请注意：我只关注 HTML/CSS 解决方案，正如我所说，这是关于 CSS 功能的概念证明，以及我可以在多大程度上使用此 POC。诸如“您应该在 JavaScript 中执行此操作”之类的答案是没有帮助的，并且完全忽略了我在这里想要实现的目标。

    :root {
    --isLeapYear: 0; /* Determinant to be worked out later, set as 0 for now */
    }
        
    #month:valid > option[value="1"]:checked {
        --m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 0; --m1: 0; --m0: calc(1 - var(--isLeapYear)); /* 1, 0 if a leap year */
        --hasDay29: 1;
        --hasDay30: 1;
        --hasDay31: 1;
    }
    #month:valid > option[value="2"]:checked {
        --m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: calc(1 - var(--isLeapYear)); --m1: var(--isLeapYear); --m0: var(--isLeapYear); 
        /* 4, 3 if a leap year */
        --hasDay29: var(--isLeapYear);
        --hasDay30: 0;
        --hasDay31: 0;
    }
    #month:valid > option[value="3"]:checked {
        --m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 1; --m1: 0; --m0: 0; /* 4 */
        --hasDay29: 1;
        --hasDay30: 1;
        --hasDay31: 1;
    }
    #month:valid > option[value="4"]:checked {
        --m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 0; --m1: 0; --m0: 0; /* 0 */
        --hasDay29: 1;
        --hasDay30: 1;
        --hasDay31: 0;
    }
    #month:valid > option[value="5"]:checked {
        --m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 0; --m1: 1; --m0: 0; /* 2 */
        --hasDay29: 1;
        --hasDay30: 1;
        --hasDay31: 1;
    }
    #month:valid > option[value="6"]:checked {
        --m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 1; --m1: 0; --m0: 1; /* 5 */
        --hasDay29: 1;
        --hasDay30: 1;
        --hasDay31: 0;
    }
    #month:valid > option[value="7"]:checked {
        --m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 0; --m1: 0; --m0: 0; /* 0 */
        --hasDay29: 1;
        --hasDay30: 1;
        --hasDay31: 1;
    }
    #month:valid > option[value="8"]:checked {
        --m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 0; --m1: 1; --m0: 1; /* 3 */
        --hasDay29: 1;
        --hasDay30: 1;
        --hasDay31: 1;
    }
    #month:valid > option[value="9"]:checked {
        --m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 1; --m1: 1; --m0: 0; /* 6 */
        --hasDay29: 1;
        --hasDay30: 1;
        --hasDay31: 0;
    }
    #month:valid > option[value="10"]:checked {
        --m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 0; --m1: 0; --m0: 1; /* 1 */
        --hasDay29: 1;
        --hasDay30: 1;
        --hasDay31: 1;
    }
    #month:valid > option[value="11"]:checked {
        --m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 1; --m1: 0; --m0: 0; /* 4 */
        --hasDay29: 1;
        --hasDay30: 1;
        --hasDay31: 0;
    }
    #month:valid > option[value="12"]:checked {
        --m7: 0; --m6: 0; --m5: 0; --m4: 0; --m3: 0; --m2: 1; --m1: 1; --m0: 0; /* 6 */
        --hasDay29: 1;
        --hasDay30: 1;
        --hasDay31: 1;
    }

    #result:after {
        counter-reset: v7 var(--m7);
        counter-reset: v6 var(--m6);
        counter-reset: v5 var(--m5);
        counter-reset: v4 var(--m4);
        counter-reset: v3 var(--m3);
        counter-reset: v2 var(--m2);
        counter-reset: v1 var(--m1);
        counter-reset: v0 var(--m0);
        --result: calc(var(--m7) * 128 + var(--m6) * 64 + var(--m5) * 32 + var(--m4) * 16 + var(--m3) * 8 + var(--m2) * 4 + var(--m1) * 2 + var(--m0));
        counter-reset: result var(--result);
        /* Debug to confirm month values are actually calculating*/
        content: counter(v7) counter(v6) counter(v5) counter(v4) counter(v3) counter(v2) counter(v1) counter(v0) " = " counter(result);
    }

<div id="controls">
    <select id="month">
        <option value="1" selected="selected">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
    </select>

    <div id="result"></div>
</div>

标签： htmlcsscss-variablescss-calc