是否可以在复选框黑客中使用 id 选择器以外的其他东西?

Question

这看起来很简单，但我甚至不确定这是否可能。 我之前在这里发布过这个项目，但在遇到这个问题后，我放弃了大约一个月。 因此，我认为，不用说，我将非常感谢我能得到的任何建议。 提前谢谢大家;我知道这样的问题通常低于这里的人的技能水平，但是当我尝试学习CSS时，我还没有找到更可靠的建议。

本质上：我需要将一个相对简单的复选框黑客集成到 CMS 中，但 CMS 会去除 id 选择器。因此，代码应该看起来像这样：

<input type="checkbox" name="thisisaname" id="thisisanid"><label class="thisisanid" for="thisisanid">Type 1</label>

。结果是这样的：

<input type="checkbox" name="thisisaname"><label class="thisisanid" for="thisisanid">Type 1</label>

可以预见的是，这打破了一切，表面上任何适应似乎都是不可能的。没有像ClientID=这样特定于 CMS 的替代方案。 我无法使用jQuery和JavaScript(它们也被CMS删除了(。

我陷入了两难境地。 我在CSS方面没有经验，而这个CMS(不幸的是，我必须使用它(使一切变得比应有的困难十倍。所以，这是我的问题：有没有推荐的方法可以克服我在研究中遗漏的这种限制？

而且......是否可以使用[attribute|=value] 选择器代替 id 来模仿这种行为？ 老实说，我什至不确定这是否值得追求，所以我没有，但这有什么好处吗？ 还是我只是在旋转我的齿轮？

顺便说一下，这是我一直在尝试集成的代码的精简版本：

.wrap { display:flex; width:50%; vertical-align:top;}
.wrap aside {vertical-align:top;}
.wrap label {white-space:nowrap; display: block;}
.checker {background: red; padding: 50px; vertical-align:top;}
.checker {margin: 10px; display: inline-block; position: relative;}
.wrap input { display: none; }
input:checked ~ main .checker { display: none; }
#check1cont:checked ~ aside .check1cont,
#check2cont:checked ~ aside .check2cont { color: blue; }
#check1cont:checked ~ main .check1,
#check2cont:checked ~ main .check2 {display: inline-block;}

<div class="wrap">
<input type="checkbox" name="cont" id="check1cont">
<input type="checkbox" name="controllers" id="check2cont">

<aside>
<label class="check1cont" for="check1cont">Check 1</label>
<label class="check2cont" for="check2cont">Check 2</label>
</aside>

<main>
<figure class="checker check1">CHECK 1</figure>
<figure class="checker check2">CHECK 2</figure>
</main>
</div>

Answer 1

如果结构已知且不会更改，您可以依靠nth-child/nth-of-type来选择您的元素，甚至无需使用类。另一个技巧是使输入位于标签上方，这样您就可以触发检查而无需for。

.wrap { display:flex; width:50%; vertical-align:top;position:relative;}
.wrap aside {vertical-align:top;}
.wrap label {white-space:nowrap; display: block;}
.checker {background: red; padding: 50px; vertical-align:top;}
.checker {margin: 10px; display: inline-block; position: relative;}
.wrap input { position:absolute;width:50px;opacity:0;z-index:1; }
.wrap input:nth-of-type(2) {top:17px;}
input:checked ~ main figure { display: none; }
input:nth-of-type(1):checked ~ aside label:nth-of-type(1),
input:nth-of-type(2):checked ~ aside label:nth-of-type(2) { color: blue; }
input:nth-of-type(1):checked ~ main figure:nth-of-type(1),
input:nth-of-type(2):checked ~ main figure:nth-of-type(2) {display: inline-block;}

<div class="wrap">
<input type="checkbox" name="cont">
<input type="checkbox" name="controllers">
<aside>
<label class="check1cont" for="check1cont">Check 1</label>
<label class="check2cont" for="check2cont">Check 2</label>
</aside>
<main>
<figure class="checker check1">CHECK 1</figure>
<figure class="checker check2">CHECK 2</figure>
</main>
</div>