我有以下代码，我一直在将其作为 CSS/HTML 概念验证。
目的是在加载时通过默认选择的选项定义变量，或者在用户更改标签上选择的选项时定义变量。在选择或加载时，CSS 旨在获取为每个月定义的值，然后应用必要的算术并以二进制值的形式显示结果，以及由 {{1 }} 调用 #result:after 样式。我不想对十进制值进行硬编码，因为变量 calc() 到 --m0 以后可能会发生变化，我希望 CSS --m7 完成所有繁重的工作.
不幸的是，无论用户选择的月份还是加载时，该值仍会导致显示“00000000 = 0”而不是评论中描述的当前值，例如，如果是 9 月，则显示“00000110 = 6”已选择，或者“00000001 = 1”表示一月，默认设置为加载。
我几乎可以肯定有一种方法可以确保在选择新选项或加载页面时可以计算/重新计算这些值。有没有只使用 CSS 的方法来做到这一点？我只能假设我的编码不正确，或者我的代码中遗漏了一些重要的东西......有人能解释一下吗？
提前致谢。
请注意：我只追求HTML/CSS 解决方案，正如我所说，这是关于 CSS 功能的概念证明以及我可以在多大程度上采用此 POC。诸如“您应该在 JavaScript 中执行此操作”之类的答案毫无帮助，并且完全没有抓住我在这里要实现的目标。
calc() :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);
}