Question

我之前已经发布过有关该项目的信息。实际上是两次。尽管答案帮助我更好地了解了我的处境，但实际上并没有适用于我的处境。我责怪自己，因为我发布了最终代码的骨架版本，但没有完全说明我需要完成什么。

本质上：我需要将一个相对简单的复选框黑客集成到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删除）。

在这种情况下，做某事非常简单，但受到CMS的约束，而CMS将难度加倍到无法确定是否可行的地步。我不是是CSS专家。我只知道我需要为几个朋友做这些小项目而已，为此我再次道歉，但这令我发疯，不知道这是否应该搁置。

这是代码。显然，它很草率，并且不是完整样式，但是它足够接近我认为它是一个比过去更好的例子：

#basesurround {
  background: #000000cc;
  margin: 0 auto;
  width: 75%;
}

.information-wrap { display:flex; vertical-align:top;} 
.information-wrap aside { background: #00000066; vertical-align: top; flex: 1 1 250px; min-width: 150px; padding: 0; max-width: 200px; }
.information-wrap main { vertical-align: top; display: flex; flex-direction: row; flex-wrap: wrap; width: 85%; justify-content: center; padding: 0 0 25px 25px; }

.information-wrap label { background: #000000cc; width: 100%; display: inline-block; border-bottom: 1px solid #000000; color: #9FC3C9; text-transform: capitalize; font-weight: 100; font-size: 11px; letter-spacing: 1px; cursor: pointer; transition: all 0.7s ease; position: relative; padding: 10px 10px 10px 30px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; word-break: break-word; line-height: 125%; }
.information-wrap label:after { content: ""; width: 25px; height: 100%; position: absolute; left: 0; top: 0; background: #000000; filter: contrast(85%); }

.information-wrap details { position: relative; }

.information-wrap details summary::-webkit-details-marker { display: none; }

.information-wrap details summary::before { content: ""; position: absolute; left: 0; background: ; width: 1.5em; height: 1.5em; transition: transform 0.1s linear;}

.information-wrap summary { width: 100%; padding: 20px; padding-left: 25px; border-bottom: 1px solid #000000; background: #9FC3C9; font-family: Proxima; font-weight: 100; text-transform: uppercase; letter-spacing: 2px; color: #000000; -webkit-transition: all 1s ease; transition: all 1s ease; }

.information-wrap summary:hover { color: #ffffff4a; }

.information-wrap summary:focus {outline: none;}

.information-wrap details[open] > summary { background: #000000; filter: contrast(85%); color: #ffffff; }

.information-wrap details[open] > summary ~ * { animation: open 1s ease; }
.information-wrap details[open] summary:before {transform: rotate(90deg);}



.infocard { flex: 0 0 32.3%; display: inline-block; vertical-align: top; font-family: Proxima, Arial, Helvetica, Sans-Serif; position: relative; margin: .5%; align-items: center; justify-content: center; overflow: hidden; color: #000000; text-align: center; line-height: 160%; background-color: #141414; height: 300px; min-width: 300px; -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); -ms-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; min-width:250px;  border: 1px solid #000000;}

.infocard figure { border: 10px solid #DADCDB; margin: 10px 10px; padding: 0; display: inline-block; position: relative;}
.infocard figure img { display: block; height: auto; max-width: 100%; } 
.infocard figcaption { color: #000000; font: 400 18px/26px Proxima, Arial, Helvetica, Sans-Serif; padding: .2em 0; position: absolute; bottom: 0; text-align: center; width: 100%; }
.infocard figcaption span { font-size: 14px; color: #ffffff }
.infocard:last-of-type {margin-bottom: 200px;}

.infocard .icons { top: -7px; position: relative; color:#ffffff}


.information-wrap input { display: none; }
input:checked ~ main .infocard { display: none; }


	/* INFOCARD TYPE LABELS & CHECK CONTROLS */


		/* TYPE SET #1 */


#infotypeone_cont:checked ~ aside .infotypeone_cont,
#infotypetwo_cont:checked ~ aside .infotypetwo_cont,
#infotypethree_cont:checked ~ aside .infotypethree_cont,
#infotypefour_cont:checked ~ aside .infotypefour_cont,
#infotypefive_cont:checked ~ aside .infotypefive_cont
{ background: #000000; filter: contrast(85%); }

#infotypeone_cont:checked ~ main .infotypeone,
#infotypetwo_cont:checked ~ main .infotypetwo,
#infotypethree_cont:checked ~ main .infotypethree,
#infotypefour_cont:checked ~ main .infotypefour,
#infotypefive_cont:checked ~ main .infotypefive
{display: inline-block;}


		/* TYPE SET #2 */


#factiontypeone_cont:checked ~ aside .factiontypeone_cont,
#factiontypetwo_cont:checked ~ aside .factiontypetwo_cont,
#factiontypethree_cont:checked ~ aside .factiontypethree_cont,
#factiontypefour_cont:checked ~ aside .factiontypefour_cont,
#factiontypefive_cont:checked ~ aside .factiontypefive_cont
{ background: #000000; filter: contrast(85%); }

#factiontypeone_cont:checked ~ main .factiontypeone,
#factiontypetwo_cont:checked ~ main .factiontypetwo,
#factiontypethree_cont:checked ~ main .factiontypethree,
#factiontypefour_cont:checked ~ main .factiontypefour,
#factiontypefive_cont:checked ~ main .factiontypefive
{display: inline-block;}





	/* TYPE COLORS #1 */


.infotypeone {background-color: #ff00004d;}
.infotypetwo {background-color: #0076ff4d;}
.infotypethree {background-color: #ffac004d;}
.infotypefour {background-color: #ff00fc4d;}
.infotypefive {background-color: #d800004d;}







	/* INFORMATION CARDS */


.infocard * { -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 0.25s ease; transition: all 0.25s ease; }

.infocard .background { width: 100%; vertical-align: top; opacity: 0.2; -webkit-filter: grayscale(100%) blur(10px); filter: grayscale(100%) blur(10px); -webkit-transition: all 2s ease; transition: all 2s ease; }

.infocard figcaption { width: 100%; padding: 15px 25px; position: absolute; left: 0; top: 50%; }

figure.infocard img { display: inline;}

figure.infocard .profile {border-radius: 50%; position: absolute; bottom: 50%; left: 50%; max-width: 100px; opacity: 1; box-shadow: 3px 3px 20px rgba(0, 0, 0, 0.5); border: 2px solid rgba(255, 255, 255, 0.5); -webkit-transform: translate(-50%, 0%); transform: translate(-50%, 0%); }

figure.infocard img.profile { height: 100px; width: 100px; }

figure.infocard h3 { line-height: 160%; margin: 0 0 5px; font-weight: 100; font-family: Proxima, Arial, Helvetica, Sans-Serif; text-transform: uppercase; text-indent: 0px; }
figure.infocard h3 a { text-decoration: none; letter-spacing: .3em; color: #9FC3C9cc; line-height: 18px; font-size: 15px; -webkit-transition: all 1s ease; transition: all 1s ease; }
figure.infocard h3 a:hover {opacity: .3; }
figure.infocard h3 span a, figure.infocard h3 span { font-size: 8px; opacity: 0.75; letter-spacing: 2px; display: inline-block; line-height: 10px; }

figure.infocard i { padding: 10px 5px; display: inline-block; font-size: 32px; color: #ffffff; text-align: center; opacity: 0.65;}
figure.infocard a {text-decoration: none; background-size: 0;}
figure.infocard i:hover {opacity: 1; -webkit-transition: all 0.35s ease; transition: all 0.35s ease; }
figure.infocard:hover .background, figure.infocard.hover .background {-webkit-transform: scale(1.3);transform: scale(1.3);}

<div id="basesurround">
<form>
<div class="information-wrap">



<!--- BEGIN INFORMATION CONTROLLER :: CHECKBOX --->



  <input type="checkbox" name="cont" id="infotypeone_cont">
  <input type="checkbox" name="cont" id="infotypetwo_cont">
  <input type="checkbox" name="cont" id="infotypethree_cont">
  <input type="checkbox" name="cont" id="infotypefour_cont">
  <input type="checkbox" name="cont" id="infotypefive_cont">

  <input type="checkbox" name="cont" id="factiontypeone_cont">
  <input type="checkbox" name="cont" id="factiontypetwo_cont">
  <input type="checkbox" name="cont" id="factiontypethree_cont">
  <input type="checkbox" name="cont" id="factiontypefour_cont">
  <input type="checkbox" name="cont" id="factiontypefive_cont">  

<!--- END INFORMATION CONTROLLER :: CHECKBOX --->



  <aside>
    


<!--- BEGIN INFORMATION CONTROLLER :: LABELS --->



    <details><summary>
      

      SUBMENU TITLE
     
 
     </summary>

      
      <label class="infotypeone_cont" for="infotypeone_cont">Check 1</label>
      <label class="infotypetwo_cont" for="infotypetwo_cont">Check 2</label>
      <label class="infotypethree_cont" for="infotypethree_cont">Check 3</label>
      <label class="infotypefour_cont" for="infotypefour_cont">Check 4</label>
      <label class="infotypefive_cont" for="infotypefive_cont">Check 5</label>


    </details>

<!--- END INFORMATION CONTROLLER :: LABELS --->

<!--- BEGIN INFORMATION CONTROLLER --->

    <details><summary>
      

      SUBMENU TITLE
     
 
     </summary>

      
      <label class="factiontypeone_cont" for="factiontypeone_cont">Faction 1</label>
      <label class="factiontypetwo_cont" for="factiontypetwo_cont">Faction 2</label>
      <label class="factiontypethree_cont" for="factiontypethree_cont">Faction 3</label>
      <label class="factiontypefour_cont" for="factiontypefour_cont">Faction 4</label>
      <label class="factiontypefive_cont" for="factiontypefive_cont">Faction 5</label>


    </details>
<!--- END INFORMATION CONTROLLER --->
    
  </aside>
  
  <main>

	<!---  BEGIN INFORMATION CARD --->
<figure class="infocard infotypeone factiontypeone">

<img src="ICON" class="background"/>
<img src="ICON" class="profile"/>


<figcaption> <h3>


<a href="#">TITLE</a>


<br><span>

SUBTITLE ● 

<a href="#">MAIN LINK</a> <br>

INFO #2 | INFO #3

</span></h3><div class="icons">

			<a href="PROFILEURL"><i class="ion-ios-person-outline"></i></a>
			<a href="DROPBOXURL"><i class="ion-ios-email-outline"></i></a>
			<a href="#"><i class="ion-ios-location-outline"></i></a>

</div></figcaption></figure>
	<!---  END INFORMATION CARD --->

	<!---  BEGIN INFORMATION CARD --->
<figure class="infocard infotypetwo factiontypetwo">

<img src="ICON" class="background"/>
<img src="ICON" class="profile"/>


<figcaption> <h3>


<a href="#">TITLE</a>


<br><span>

SUBTITLE ● 

<a href="#">MAIN LINK</a> <br>

INFO #2 | INFO #3

</span></h3><div class="icons">

			<a href="PROFILEURL"><i class="ion-ios-person-outline"></i></a>
			<a href="DROPBOXURL"><i class="ion-ios-email-outline"></i></a>
			<a href="#"><i class="ion-ios-location-outline"></i></a>

</div></figcaption></figure>
	<!---  END INFO CARD --->

	<!---  BEGIN INFO CARD --->
<figure class="infocard infotypethree factiontypethree">

<img src="ICON" class="background"/>
<img src="ICON" class="profile"/>


<figcaption> <h3>


<a href="#">TITLE</a>


<br><span>

SUBTITLE ● 

<a href="#">MAIN LINK</a> <br>

INFO #2 | INFO #3

</span></h3><div class="icons">

			<a href="PROFILEURL"><i class="ion-ios-person-outline"></i></a>
			<a href="DROPBOXURL"><i class="ion-ios-email-outline"></i></a>
			<a href="#"><i class="ion-ios-location-outline"></i></a>

</div></figcaption></figure>
	<!---  END INFO CARD --->

	<!---  BEGIN INFO CARD --->
<figure class="infocard infotypefour factiontypefour">

<img src="ICON" class="background"/>
<img src="ICON" class="profile"/>


<figcaption> <h3>


<a href="#">TITLE</a>


<br><span>

SUBTITLE ● 

<a href="#">MAIN LINK</a> <br>

INFO #2 | INFO #3

</span></h3><div class="icons">

			<a href="PROFILEURL"><i class="ion-ios-person-outline"></i></a>
			<a href="DROPBOXURL"><i class="ion-ios-email-outline"></i></a>
			<a href="#"><i class="ion-ios-location-outline"></i></a>

</div></figcaption></figure>
	<!---  END INFO CARD --->

	<!---  BEGIN INFO CARD --->

<figure class="infocard infotypefive factiontypefive">

<img src="ICON" class="background"/>
<img src="ICON" class="profile"/>


<figcaption> <h3>


<a href="#">TITLE</a>


<br><span>

SUBTITLE ● 

<a href="#">MAIN LINK</a> <br>

INFO #2 | INFO #3

</span></h3><div class="icons">

			<a href="PROFILEURL"><i class="ion-ios-person-outline"></i></a>
			<a href="DROPBOXURL"><i class="ion-ios-email-outline"></i></a>
			<a href="#"><i class="ion-ios-location-outline"></i></a>

</div></figcaption></figure>
	<!---  END INFO CARD --->

</main></div>
</form></div>

我很困惑。我不太了解CSS，这个CMS（不幸的是，我必须使用）使最简单的任务变得异常困难。这是我尝试过的：

使用nth-child / nth-of-type选择器： Temani Afif。这个解决方案很优雅，我喜欢它，但是不幸的是，由于将使用该代码，结构会经常变化。
将输入放置在标签上方：建议我看一下对此，但我找不到有关如何正确编码的任何信息标签上方的输入，所以我不确定是否可以在此使用
情况。
我考虑过模仿我想要使用的行为 [attribute|=value]而不是id的选择器，但我没有能够使其正常工作。不过我不知道我是否正在受代码或我自己的权限的限制，所以我不确定是否值得进一步研究的东西。

所以……是否有克服我在研究中遗漏的id=局限性的推荐方法？

FWIW，此操作的目的是创建一个简单的（ish）代码，在该代码中可以轻松按需要多次添加代码的INFO CARD部分，以对其进行编辑以对电影/书籍/其他信息进行排序这种性质，同时又使人们可以轻松更改figure class=。

Answer 1

这里的问题是for属性在<label>内部工作的方式非常有限-它寻找带有相应id的表单控件。（仅id可以使用-没有其他属性。）

如果找不到，则最终没有表单控件与<label>相关联...因此，依赖于for属性的 checkbox hack 工作，无法产生预期的效果。

由于我们无法在文档的初始标记中将id添加到复选框，所以为什么不这样做，而是通过访问 Document对象将id动态添加到复选框模型（DOM）？

这很容易在一行中完成：

document.querySelector('[name="thisisaname"]').id = 'thisisanid';

请参见下面的工作示例，请注意，初始标记中没有id：

document.querySelector('[name="thisisaname"]').id = 'thisisanid';

label {
cursor: pointer;
}

label:hover {
font-weight: bold;
text-decoration: underline;
}

input[type=checkbox],
input[type=checkbox] + p {
opacity: 0;
}

input[type=checkbox] + p {
transition: opacity 1s linear;
}

input[type=checkbox]:checked + p {
opacity: 1;
}

<label class="thisisanid" for="thisisanid">Click Me</label>
<input type="checkbox" name="thisisaname">
<p>Checkbox hack is working</p>

复选框黑客中的规避ID选择器

1 个答案: