Question

我有一个CSS手风琴，我试图更改活动标签的background-color。我尝试过使用它，但无法使用它。我有什么遗失的吗？

ul.accordion label + input[type='radio']:checked {
    background-color: #000;
}

HTML：

<ul class="accordion">
<li>
    <label for="q-1">Content 1</label>
    <input type="radio" name="a" id="q-1" checked="checked">
    <div class='content'>
        <p>Content 1 blah blah blah blah</p>
    </div>
</li>

<li>
    <label for="q-2">Content 2</label>
    <input type="radio" name="a" id="q-2">
    <div class='content'>
        <p>Content 2 blah blah blah blah</p>
    </div>
</li>

</ul>

这是我的CSS：

/* Clean up the lists styles */
    ul.accordion {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Hide the radio buttons */
/* These are what allow us to toggle content panes */
ul.accordion label + input[type='radio'] {
    display: none;
}

/* Give each content pane some styles */
ul.accordion li {
    background-color: #fff;
    border-bottom: 1px solid #DDDDDD;
}

ul.accordion ul {
    margin-top: -15px;
}

/* Make the main tab look more clickable */
ul.accordion label {
    background-color: #666666;
    color: #FFFFFF;
    display: block;
    padding: 10px;
    margin: -5px -10px;
    font-size: 16px;
    font-weight: 700;
}

/* Set up the div that will show and hide */
ul.accordion div.content {
    overflow: hidden;
    padding: 0 10px;
    display: none;
}

/* Show the content boxes when the radio buttons are checked */
ul.accordion label + input[type='radio']:checked + div.content {
    display: block;
}

http://jsfiddle.net/hvhL5ouk/2/

Answer 1

由于CSS中没有以前的选择器，您必须在input之前移动label元素并使用相邻的兄弟（+）选择器来选择{{1}当label为input时。

:checked

<强> Updated Fiddle

input[type="radio"]:checked + label {
  background: #000;
}

/* Clean up the lists styles */

ul.accordion {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Hide the radio buttons */

/* These are what allow us to toggle content panes */

ul.accordion input[type='radio'] {
  display: none;
}
/* Give each content pane some styles */

ul.accordion li {
  background-color: #fff;
  border-bottom: 1px solid #DDDDDD;
}
/* Make the main tab look more clickable */

ul.accordion label {
  background-color: #666666;
  color: #FFFFFF;
  display: block;
  padding: 10px;
  font-size: 16px;
  font-weight: 700;
}
/* Set up the div that will show and hide */

ul.accordion div.content {
  overflow: hidden;
  padding: 0 20px;
  display: none;
}
/* Show the content boxes when the radio buttons are checked */

ul.accordion input[type='radio']:checked + label + div.content {
  display: block;
}
input[type="radio"]:checked + label {
  background: #000;
}
body {
  margin: 0;
}

Answer 2

事实并非:checked选择器不起作用（完全没问题），你的CSS没有按照你的想法行事：

ul.accordion label + input[type='radio']:checked

未选择label 。它选择了已检查的单选按钮，它是标签的直接兄弟（紧接在之后）。你实际上需要与此相反，但这在CSS中实际上是不可能的（没有编辑你的标记）。

您必须在HTML中切换label和input，然后您的CSS才能正常工作：

<input type="radio" name="a" id="q-1" checked="checked">
<label for="q-1">Content 1</label>

如果您想将标签保留在单选按钮的左侧，只需将float: left添加到标签样式即可。

Answer 3

ul.accordion label + input[type='radio']:checked {
   background-color: #000;
}

此代码的字面意思是

找到我检查过的所有输入广播并按照ul.accordion进行操作标签然后将背景颜色设置为＃000

您必须撤消此过程才能获得所需内容。目前在CSS中是不可能的。

我想到的唯一方法就是重新排序你的DOM结构，使用JS或伪类:before和z-index来创建活动标签上的图层。

Answer 4

仅使用CSS就可以实现这一点。通过使用属性display:flex + order来交换label位置以获得您想要的结果。

示例：https://codepen.io/tronghiep92/pen/BdrobR

返回HTML标记。

  <li>
   <label for="q-1">Content 1</label>
   <input type="radio" name="a" id="q-1" checked="checked">
   <div class='content'>
    <p>Content 1 blah blah blah blah</p>
   </div>
 </li>

更改为：

  <li>
    <input type="radio" name="a" id="q-1" checked="checked" />
    <label for="q-1">Content 1</label>
    <div class='content'>
      <p>Content 1 blah blah blah blah</p>
    </div>
  </li>

并使用CSS修复订单/位置：

li {
   display: flex;
}
label {
   order: 0;
}
input{
  order: 1;
}
div.content {
  order: 2;
}
input:checked ~ * {
  /* anything here you want with label and div.content*/
}

更多提示：我始终使用标记<label>换行<input />，因为点击<label>然后<input />为focus, checked。与上面的example一样，点击图标搜索，然后input焦点。

用于已检查单选按钮标签的CSS

4 个答案: