使用 calc() 获取 CSS 个要正确添加的变量

Question

我正在试验一个新概念，使用 CSS 变量作为二进制寄存器来创建数据流，最终计算结果最终显示在文档的后面。当显示一个变量的最终值或在下面的示例中分别显示两个变量时，这个想法是可行的。但是当我尝试将这两个变量加在一起时，过程似乎失败了，我不确定 CSS 的哪一部分有问题导致结果无法显示。

以下示例：https://codepen.io/eliseodannunzio/pen/JjWbOBo 显示了我所指的内容。

如您所见，--ck0 到 --ck7 的值将根据单击的世纪值（从 18 到 29）重新计算，显示二进制值，后跟计算的十进制值。此外，--m0 到 --m7 的值将根据单击的任何月份值（从一月到十二月）重新计算，显示二进制值，后跟计算的十进制值。

两个最终值都通过内容计数器显示，内容计数器已分别从 0 增加到 --century 和 --month 的值。

没有意义的是第三个 DIV 基本上将 --century 和 --month 加在一起，--result 值 a) 是'每次点击都不会更新，b) 没有正确添加值，我不知道为什么......任何人都可以解释一下吗？提前致谢。

:root {
  --isLeapYear: 0;
  /* Determinant to be worked out later, set as 0 for now */
  /* Month registers */
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 0;
  /* Century keys */
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  --century: 0;
  --month: 0;
  --result: 0;
  --borderBlack: 1px solid black;
  --selectedColor: #007ec2;
}

[type="radio"],
[type="checkbox"] {
  display: none;
}

.century+label,
.month+label {
  padding-left: 4px;
  padding-right: 4px;
  height: 16px;
  border-left: var(--borderBlack);
  border-right: var(--borderBlack);
  font: 400 13.3333px Arial;
  display: inline-block;
  background-color: white;
  color: black;
}

.century+label {
  width: 20px;
  left: 5px;
  top: 5px;
}

.month+label {
  width: 80px;
  position: relative;
  left: 73px;
  top: -224px;
}

label[for="month-01"],
label[for="century-18"] {
  border-top: var(--borderBlack);
}

label[for="month-12"],
label[for="century-29"] {
  border-bottom: var(--borderBlack);
}

input:checked+label {
  background-color: var(--selectedColor);
  color: white;
}


/* Century Keys */

#century-18:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 1;
  --ck0: 0;
  /* 2 */
}

#century-19:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 0;
  --ck0: 0;
  /* 0 */
}

#century-20:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  /* 6*/
}

#century-21:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 0;
  --ck0: 0;
  /* 4 */
}

#century-22:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 1;
  --ck0: 0;
  /* 2 */
}

#century-23:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 0;
  --ck0: 0;
  /* 0 */
}

#century-24:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  /* 6 */
}

#century-25:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 0;
  --ck0: 0;
  /* 4 */
}

#century-26:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 1;
  --ck0: 0;
  /* 2 */
}

#century-27:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 0;
  --ck0: 0;
  /* 0 */
}

#century-28:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  /* 6 */
}

#century-29:checked~#century_result {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 0;
  --ck0: 0;
  /* 4 */
}


/* Month Keys */

.month[value="1"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: calc(1 - var(--isLeapYear));
}

.month[value="2"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: calc(1 - var(--isLeapYear));
  --m1: var(--isLeapYear);
  --m0: var(--isLeapYear);
}

.month[value="3"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 0;
  --m0: 0;
}

.month[value="4"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 0;
}

.month[value="5"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 1;
  --m0: 0;
}

.month[value="6"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 0;
  --m0: 1;
}

.month[value="7"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 0;
}

.month[value="8"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 1;
  --m0: 1;
}

.month[value="9"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 1;
  --m0: 0;
}

.month[value="10"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 1;
}

.month[value="11"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 0;
  --m0: 0;
}

.month[value="12"]:checked~#month_result {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 1;
  --m0: 0;
}

.century:checked~#century_result {
  font-family: Courier;
  font-weight: 700;
  --century: calc(var(--ck7) * 128 + var(--ck6) * 64 + var(--ck5) * 32 + var(--ck4) * 16 + var(--ck3) * 8 + var(--ck2) * 4 + var(--ck1) * 2 + var(--ck0));
}

#century_result:after {
  counter-reset: C7 var(--ck7) C6 var(--ck6) C5 var(--ck5) C4 var(--ck4) C3 var(--ck3) C2 var(--ck2) C1 var(--ck1) C0 var(--ck0) CENTURY 0;
  counter-increment: CENTURY var(--century);
  content: "C" counter(C7) counter(C6) counter(C5) counter(C4) counter(C3) counter(C2) counter(C1) counter(C0) " = " counter(CENTURY)
}

.month:checked~#month_result {
  font-family: Courier;
  font-weight: 700;
  --month: calc(var(--m7) * 128 + var(--m6) * 64 + var(--m5) * 32 + var(--m4) * 16 + var(--m3) * 8 + var(--m2) * 4 + var(--m1) * 2 + var(--m0));
}

#month_result:after {
  counter-reset: M7 var(--m7) M6 var(--m6) M5 var(--m5) M4 var(--m4) M3 var(--m3) M2 var(--m2) M1 var(--m1) M0 var(--m0) MONTH 0;
  counter-increment: MONTH var(--month);
  content: "M" counter(M7) counter(M6) counter(M5) counter(M4) counter(M3) counter(M2) counter(M1) counter(M0) " = " counter(MONTH)
}

#result {
  font-family: Courier;
  font-weight: 700;
  --century: calc(var(--ck7) * 128 + var(--ck6) * 64 + var(--ck5) * 32 + var(--ck4) * 16 + var(--ck3) * 8 + var(--ck2) * 4 + var(--ck1) * 2 + var(--ck0));
  --month: calc(var(--m7) * 128 + var(--m6) * 64 + var(--m5) * 32 + var(--m4) * 16 + var(--m3) * 8 + var(--m2) * 4 + var(--m1) * 2 + var(--m0));
  --result: calc(var(--century) + var(--month));
}

#result:after {
  counter-reset: RESULT 0;
  counter-increment: RESULT var(--result);
  content: "R = " counter(RESULT);
}

#century_result {
  position: absolute;
  top: 240px;
}

#month_result {
  position: absolute;
  top: 265px;
}

#result {
  position: absolute;
  top: 290px;
}

<input id="century-18" name="century" class="century" type="radio" value="18" /><label for="century-18">18</label><br />
<input id="century-19" name="century" class="century" type="radio" value="19" /><label for="century-19">19</label><br />
<input id="century-20" name="century" class="century" type="radio" value="20" checked="checked" /><label for="century-20">20</label><br />
<input id="century-21" name="century" class="century" type="radio" value="21" /><label for="century-21">21</label><br />
<input id="century-22" name="century" class="century" type="radio" value="22" /><label for="century-22">22</label><br />
<input id="century-23" name="century" class="century" type="radio" value="23" /><label for="century-23">23</label><br />
<input id="century-24" name="century" class="century" type="radio" value="24" /><label for="century-24">24</label><br />
<input id="century-25" name="century" class="century" type="radio" value="25" /><label for="century-25">25</label><br />
<input id="century-26" name="century" class="century" type="radio" value="26" /><label for="century-26">26</label><br />
<input id="century-27" name="century" class="century" type="radio" value="27" /><label for="century-27">27</label><br />
<input id="century-28" name="century" class="century" type="radio" value="28" /><label for="century-28">28</label><br />
<input id="century-29" name="century" class="century" type="radio" value="29" /><label for="century-29">29</label><br />

<input id="month-01" name="month" class="month" type="radio" value="1" checked="checked" /><label for="month-01">January</label><br />
<input id="month-02" name="month" class="month" type="radio" value="2" /><label for="month-02">February</label><br />
<input id="month-03" name="month" class="month" type="radio" value="3" /><label for="month-03">March</label><br />
<input id="month-04" name="month" class="month" type="radio" value="4" /><label for="month-04">April</label><br />
<input id="month-05" name="month" class="month" type="radio" value="5" /><label for="month-05">May</label><br />
<input id="month-06" name="month" class="month" type="radio" value="6" /><label for="month-06">June</label><br />
<input id="month-07" name="month" class="month" type="radio" value="7" /><label for="month-07">July</label><br />
<input id="month-08" name="month" class="month" type="radio" value="8" /><label for="month-08">August</label><br />
<input id="month-09" name="month" class="month" type="radio" value="9" /><label for="month-09">September</label><br />
<input id="month-10" name="month" class="month" type="radio" value="10" /><label for="month-10">October</label><br />
<input id="month-11" name="month" class="month" type="radio" value="11" /><label for="month-11">November</label><br />
<input id="month-12" name="month" class="month" type="radio" value="12" /><label for="month-12">December</label><br />

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

Answer 1

因为在执行 #century-*:checked~ #century_result 时，您只将值分配给 #century_result，因此 #result 将一无所获。您需要同时定位这两个元素，所以只需执行 #century-*:checked ~ *（与 #month_result 相同的逻辑）

:root {
  --isLeapYear: 0;
  /* Determinant to be worked out later, set as 0 for now */
  /* Month registers */
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 0;
  /* Century keys */
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  --century: 0;
  --month: 0;
  --result: 0;
  --borderBlack: 1px solid black;
  --selectedColor: #007ec2;
}

[type="radio"],
[type="checkbox"] {
  display: none;
}

.century+label,
.month+label {
  padding-left: 4px;
  padding-right: 4px;
  height: 16px;
  border-left: var(--borderBlack);
  border-right: var(--borderBlack);
  font: 400 13.3333px Arial;
  display: inline-block;
  background-color: white;
  color: black;
}

.century+label {
  width: 20px;
  left: 5px;
  top: 5px;
}

.month+label {
  width: 80px;
  position: relative;
  left: 73px;
  top: -224px;
}

label[for="month-01"],
label[for="century-18"] {
  border-top: var(--borderBlack);
}

label[for="month-12"],
label[for="century-29"] {
  border-bottom: var(--borderBlack);
}

input:checked+label {
  background-color: var(--selectedColor);
  color: white;
}


/* Century Keys */

#century-18:checked~ * {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 1;
  --ck0: 0;
  /* 2 */
}

#century-19:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 0;
  --ck0: 0;
  /* 0 */
}

#century-20:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  /* 6*/
}

#century-21:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 0;
  --ck0: 0;
  /* 4 */
}

#century-22:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 1;
  --ck0: 0;
  /* 2 */
}

#century-23:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 0;
  --ck0: 0;
  /* 0 */
}

#century-24:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  /* 6 */
}

#century-25:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 0;
  --ck0: 0;
  /* 4 */
}

#century-26:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 1;
  --ck0: 0;
  /* 2 */
}

#century-27:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 0;
  --ck1: 0;
  --ck0: 0;
  /* 0 */
}

#century-28:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 1;
  --ck0: 0;
  /* 6 */
}

#century-29:checked~* {
  --ck7: 0;
  --ck6: 0;
  --ck5: 0;
  --ck4: 0;
  --ck3: 0;
  --ck2: 1;
  --ck1: 0;
  --ck0: 0;
  /* 4 */
}


/* Month Keys */

.month[value="1"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: calc(1 - var(--isLeapYear));
}

.month[value="2"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: calc(1 - var(--isLeapYear));
  --m1: var(--isLeapYear);
  --m0: var(--isLeapYear);
}

.month[value="3"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 0;
  --m0: 0;
}

.month[value="4"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 0;
}

.month[value="5"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 1;
  --m0: 0;
}

.month[value="6"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 0;
  --m0: 1;
}

.month[value="7"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 0;
}

.month[value="8"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 1;
  --m0: 1;
}

.month[value="9"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 1;
  --m0: 0;
}

.month[value="10"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 0;
  --m1: 0;
  --m0: 1;
}

.month[value="11"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 0;
  --m0: 0;
}

.month[value="12"]:checked~* {
  --m7: 0;
  --m6: 0;
  --m5: 0;
  --m4: 0;
  --m3: 0;
  --m2: 1;
  --m1: 1;
  --m0: 0;
}

.century:checked~* {
  font-family: Courier;
  font-weight: 700;
  --century: calc(var(--ck7) * 128 + var(--ck6) * 64 + var(--ck5) * 32 + var(--ck4) * 16 + var(--ck3) * 8 + var(--ck2) * 4 + var(--ck1) * 2 + var(--ck0));
}

#century_result:after {
  counter-reset: C7 var(--ck7) C6 var(--ck6) C5 var(--ck5) C4 var(--ck4) C3 var(--ck3) C2 var(--ck2) C1 var(--ck1) C0 var(--ck0) CENTURY 0;
  counter-increment: CENTURY var(--century);
  content: "C" counter(C7) counter(C6) counter(C5) counter(C4) counter(C3) counter(C2) counter(C1) counter(C0) " = " counter(CENTURY)
}

.month:checked~#month_result {
  font-family: Courier;
  font-weight: 700;
  --month: calc(var(--m7) * 128 + var(--m6) * 64 + var(--m5) * 32 + var(--m4) * 16 + var(--m3) * 8 + var(--m2) * 4 + var(--m1) * 2 + var(--m0));
}

#month_result:after {
  counter-reset: M7 var(--m7) M6 var(--m6) M5 var(--m5) M4 var(--m4) M3 var(--m3) M2 var(--m2) M1 var(--m1) M0 var(--m0) MONTH 0;
  counter-increment: MONTH var(--month);
  content: "M" counter(M7) counter(M6) counter(M5) counter(M4) counter(M3) counter(M2) counter(M1) counter(M0) " = " counter(MONTH)
}

#result {
  font-family: Courier;
  font-weight: 700;
  --century: calc(var(--ck7) * 128 + var(--ck6) * 64 + var(--ck5) * 32 + var(--ck4) * 16 + var(--ck3) * 8 + var(--ck2) * 4 + var(--ck1) * 2 + var(--ck0));
  --month: calc(var(--m7) * 128 + var(--m6) * 64 + var(--m5) * 32 + var(--m4) * 16 + var(--m3) * 8 + var(--m2) * 4 + var(--m1) * 2 + var(--m0));
  --result: calc(var(--century) + var(--month));
}

#result:after {
  counter-reset: RESULT 0;
  counter-increment: RESULT var(--result);
  content: "R = " counter(RESULT);
}

#century_result {
  position: absolute;
  top: 240px;
}

#month_result {
  position: absolute;
  top: 265px;
}

#result {
  position: absolute;
  top: 290px;
}

<input id="century-18" name="century" class="century" type="radio" value="18" /><label for="century-18">18</label><br />
<input id="century-19" name="century" class="century" type="radio" value="19" /><label for="century-19">19</label><br />
<input id="century-20" name="century" class="century" type="radio" value="20" checked="checked" /><label for="century-20">20</label><br />
<input id="century-21" name="century" class="century" type="radio" value="21" /><label for="century-21">21</label><br />
<input id="century-22" name="century" class="century" type="radio" value="22" /><label for="century-22">22</label><br />
<input id="century-23" name="century" class="century" type="radio" value="23" /><label for="century-23">23</label><br />
<input id="century-24" name="century" class="century" type="radio" value="24" /><label for="century-24">24</label><br />
<input id="century-25" name="century" class="century" type="radio" value="25" /><label for="century-25">25</label><br />
<input id="century-26" name="century" class="century" type="radio" value="26" /><label for="century-26">26</label><br />
<input id="century-27" name="century" class="century" type="radio" value="27" /><label for="century-27">27</label><br />
<input id="century-28" name="century" class="century" type="radio" value="28" /><label for="century-28">28</label><br />
<input id="century-29" name="century" class="century" type="radio" value="29" /><label for="century-29">29</label><br />

<input id="month-01" name="month" class="month" type="radio" value="1" checked="checked" /><label for="month-01">January</label><br />
<input id="month-02" name="month" class="month" type="radio" value="2" /><label for="month-02">February</label><br />
<input id="month-03" name="month" class="month" type="radio" value="3" /><label for="month-03">March</label><br />
<input id="month-04" name="month" class="month" type="radio" value="4" /><label for="month-04">April</label><br />
<input id="month-05" name="month" class="month" type="radio" value="5" /><label for="month-05">May</label><br />
<input id="month-06" name="month" class="month" type="radio" value="6" /><label for="month-06">June</label><br />
<input id="month-07" name="month" class="month" type="radio" value="7" /><label for="month-07">July</label><br />
<input id="month-08" name="month" class="month" type="radio" value="8" /><label for="month-08">August</label><br />
<input id="month-09" name="month" class="month" type="radio" value="9" /><label for="month-09">September</label><br />
<input id="month-10" name="month" class="month" type="radio" value="10" /><label for="month-10">October</label><br />
<input id="month-11" name="month" class="month" type="radio" value="11" /><label for="month-11">November</label><br />
<input id="month-12" name="month" class="month" type="radio" value="12" /><label for="month-12">December</label><br />

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

使用 calc() 获取 CSS 个要正确添加的变量

Getting CSS Variables to Add Correctly using calc()

css

css-variables

css-calc