在html中单选选择器,已选中单选按钮标签的CSS选择器

炎炎设计

我忘记了我第一次看到它提到的地方，但只要你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]:checkedDOM元素移动到header容器，然后使用后代/子选择器来访问label它们自己，允许在它们的时候设置它们的样式。选择相应的无线电盒/复选框。我们不仅可以设置标签的样式，还可以设置其他内容，这些内容可能是兄弟容器的后代相对于所有inputs。现在，你们一直在等待，JSFIDDLE！去那里，玩它，让它为你工作，找出它的工作原理，打破它，做你做的！希望所有这些都有意义并完全回答这个问题以及可能出现的任何后续问题。