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

如果结构已知并且不会更改，则可以甚至不用类来依靠import VS2 from 'vue-script2' export default { name: 'freshchat', mounted() { VS2.load('yourdropzonejs script').then(() => { var vm = this ..... this.on("success", function(file,albumImage) { vm.albumImages }); }) } } / 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;}

是否可以在复选框hack中使用除id选择器以外的其他东西？

1 个答案: