html - 如何仅在 CSS 中存储 "state"？

Question

我正在努力解决一个难题，除了一个很大的部分，我已经解决了大部分问题:

想象一下，如果您要 5 个 div。一个标题和 4 个部分 (a - d)。

每个部分都有一个打开/关闭切换，我使用 CSS Checkbox Hack 来切换打开/关闭的值。打开时，一个部分显示其中的内容，按钮切换为“关闭” 单击隐藏内容并将按钮切换回“打开”。一切正常。

作为要求的一部分:页眉应该以语法正确的形式不断显示哪些部分是打开的:

“所有部分都关闭了”

“A部分是开放的”

“sections A 和 C 是开放的”<-- 复数在这里很重要。

我主要是一个 javascript 专家，这在 javascript 中是一个微不足道的问题。问题是？必须是纯 CSS。为什么？因为这是要求。我怀疑我实际上是在接受测试，看我是否能找到解决问题所需的资源。我这样说是因为它是一个 javascript 开发职位——很奇怪他们会用纯 CSS 测试我，而且它是一个 100% 的远程职位。当我过去远程工作时，80% 的工作都是谷歌搜索或 SO，所以我来了。 ;)

我假设解决方案涉及滥用 content: 属性以及 css counter 甚至多个，但到目前为止，我不知所措如何做到这一点。

允许任何标记和任何 CSS，但不能使用 javascript。还必须是跨浏览器兼容的，但我会对它在 ONE 上工作感到满意。

有人能指出我正确的方向吗？

TIA。

编辑:到目前为止我得到的代码:

input[type='checkbox'] {
  visibility: hidden;
}
label:after {
  color: blue;
  text-decoration: underline;
  display: inline;
  position: absolute;
  right: 10px;
  content: 'open';
}
#sectionA:checked ~ label:after {
  content: 'close';
}
.section {
  border: 1px solid black;
  border-radius: 4px;
  margin: 1% auto;
  position: relative;
  line-height: 35px;
  padding-left: 5px;
  width: 100%;
}
.header {
  background-color: #ddd;
}
.sectionName {
  color: #ffa500;
  font-style: italic;
  display: inline;
}
.sectionContent {
  max-height: 0;
  display: none;
  transition: all .4s;
}
#sectionA:checked + .sectionContent {
  max-height: 30px;
  display: block;
}
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix {
  display: inline-block;
}
#siblings {
  color: #333;
}
#siblings,
h2 ~ div {
  color: red;
}

<div class="section header">
  <span id="headerMessage">all sections are closed</span>
</div>
<div class="section closed clearfix">
  section <span class="sectionName">a</span>
  <label for="sectionA" id="labelA"></label>
  <input type=checkbox id="sectionA" />
  <div class="sectionContent">section <span class="sectionName">a</span> content</div>
</div>
<div class="section closed clearfix">
  section <span class="sectionName">b</span>
  <label for="sectionB"></label>
  <input type=checkbox id="sectionB" />
  <div class="sectionContent">section <span class="sectionName">b</span> content</div>
</div>
<div class="section closed">
  section <span class="sectionName">c</span>
</div>
<div class="section closed">
  section <span class="sectionName">d</span>
</div>

我还没有为 b-d 部分添加类，因此它们还不能工作，但它们的行为与 a 部分相同。

Answer 1

这是可能的，但仅如果打开的选项卡列表位于 HTML 代码的最底部(因此在选项卡下方)。如果是的话，将所有的情况都一一处理是一件简单的事情。我在以下代码中这样做了:

/* Hide everything to start with */
.tab,
#T0,
#T1,
.plural,
.t {
  display: none;
}

/* Show the correct tab when needed */
#a:checked ~ #tab1,
#b:checked ~ #tab2,
#c:checked ~ #tab3,
#d:checked ~ #tab4 {
  display: block;
}

/* When nothing is checked, show #T0, otherwise, show #T1 */
#a:not(:checked) + #b:not(:checked) + #c:not(:checked) + #d:not(:checked) ~ #count #T0,
:checked ~ #count #T1 {
   display: inline;
}

/* Check if the message should be plural or singular */
:checked ~ :checked ~ #count .plural {
  display: inline;
}
:checked ~ :checked ~ #count .singular {
  display: none;
}

#a:checked ~ #count .taba,
#b:checked ~ #count .tabb,
#c:checked ~ #count .tabc,
#d:checked ~ #count .tabd {
  display: inline;
}

/* Show the required tabs,
   with proper comma and 'and' placement
*/
/* if ? and d are open, we need 'and' */
:checked ~ #d:checked ~ #count .andcd,
/* if ? and c are open but d is not, we need 'and' */
:checked ~ #c:checked ~ #d:not(:checked) ~ #count .andbc,
/* if a and b are open but c and d are not, we need 'and' */
#a:checked ~ #b:checked ~ #c:not(:checked) ~ #d:not(:checked) ~ #count .andab,
/* if a, b and ? are open, we need a comma */
#a:checked ~ #b:checked ~ :checked ~ #count .comab,
/* if ?, c and d are open, we need a comma */
:checked ~ #c:checked ~ #d:checked ~ #count .combc {
  display: inline;
}

/* make the counter appear as if it is at the very top of the page,
   even though it is not.
*/
/* Make room at the top, and force absolute positions to be relative
   to #container*/
#container {
  position: relative;
  padding-top: 2em;
}
/* move tab-counter to the top */
#count {
  position:absolute;
  top: 0;
}

  <div id="container">
    <input id="a" type="checkbox"/>
    <input id="b" type="checkbox"/>
    <input id="c" type="checkbox"/>
    <input id="d" type="checkbox"/>
    <div id="tab1" class="tab t1"><label for="a">Tab1</label></div>
    <div id="tab2" class="tab t2"><label for="a">Tab2</label></div>
    <div id="tab3" class="tab t3"><label for="a">Tab3</label></div>
    <div id="tab4" class="tab t4"><label for="a">Tab4</label></div>
    <br/>
    <div id="count">
      <span id="T0">None of the tabs are open</span>
      <span id="T1">
        Tab<span class="plural">s</span>
        <!--tab listing-->
        <span class="t taba">a</span><!--
        --><span class="t comab">, </span><!--
        --><span class="t andab"> and </span><!--
        --><span class="t tabb">b</span><!--
        --><span class="t combc">, </span><!--
        --><span class="t andbc"> and </span><!--
        --><span class="t tabc">c</span><!--
        --><span class="t andcd"> and </span><!--
        --><span class="t tabd">d</span><!--
        -->
        <span class="singular">is</span>
        <span class="plural">are</span>
        opened.
      </span>
    </div>
  </div>

我试图通过在需要时简单地切换逗号和 和 span 来尽可能高效地使用正确的语法，并且尽可能地高效用它。我已经测试了所有 16 种情况，这对每种情况都可以正常工作。

就代码效率而言，我认为底部 display:inline 样式的条件数量与制表符的数量成线性关系，而 interpunction-spans 的数量也与选项卡的数量。这意味着这是低效的代码(与脚本相比)，但仍不像我最初想象的那样呈指数增长。

编辑:作为对您发布JSFiddle 的回应， 那是不可能的。您根本无法访问 CSS 中的父元素或 previous sibling 元素。您必须将页眉放在文档的最底部。如果你愿意，你可以弄乱绝对定位。有关更多信息，请参阅我更新的代码。

PS:这几乎感觉像是一个代码高尔夫问题，所以如果这不是一个合法的 SO 问题，它在 http://codegolf.stackexchange.com 上仍然是一个非常好的挑战。 .