本文共 1628 字,大约阅读时间需要 5 分钟。
我忘记了我第一次看到它的位置,但只要你设置了for=属性,你就可以将标签嵌入其他地方的容器中。那么,让我们看一下SO上的样本:
* {
padding: 0;
margin: 0;
background-color: #262626;
color: white;
}
.radio-button {
display: none;
}
#filter {
display: flex;
justify-content: center;
}
.filter-label {
display: inline-block;
border: 4px solid green;
padding: 10px 20px;
font-size: 1.4em;
text-align: center;
cursor: pointer;
}
main {
clear: left;
}
.content {
padding: 3% 10%;
display: none;
}
h1 {
font-size: 2em;
}
.date {
padding: 5px 30px;
font-style: italic;
}
.filter-label:hover {
background-color: #505050;
}
#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
background-color: green;
}
#featured-radio:checked~main .featured {
display: block;
}
#personal-radio:checked~main .personal {
display: block;
}
#tech-radio:checked~main .tech {
display: block;
}
Featured
Personal
Tech
Cool Stuff
Today
I'm showing cool stuff in this article!
Not As Cool
Tuesday
This stuff isn't nearly as cool for some reason :(;
Cool Tech Article
Last Monday
This article has awesome stuff all over it!
Cool Personal Article
Two Fridays Ago
This article talks about how I got a job at a cool startup because I rock!
呼。对于“样本”来说,这是很多的,但我觉得它确实带动了效果并指出:我们当然可以为已检查的输入控件选择一个标签而不是兄弟姐妹。秘诀在于将input标记保持为只需要它们的内容(在这种情况下 - 只有body元素)。
由于label元素实际上并未使用:checked伪选择器,因此标签存储在header中并不重要。它确实有额外的好处,因为header是一个兄弟元素,我们可以使用~通用同级选择器从input[type=radio]:checked DOM元素移动到header容器,然后使用后代/子选择器自己访问labels,允许在选择各自的收音机框/复选框时设置它们的样式。
我们不仅可以设置标签样式,还可以设置其他内容,这些内容可能是兄弟容器的后代相对于所有inputs。现在,你们一直在等待,JSFIDDLE!去那里,玩它,让它为你工作,找出它的工作原理,打破它,做你做的!
希望一切都有意义并完全回答问题,并可能出现任何可能出现的后续问题。
转载地址:https://blog.csdn.net/weixin_33960567/article/details/118064159 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!