：li-element的checked-functions

Question

我如何模拟以下行为：检查其他元素然后输入元素，比如 - 这当然不起作用，仅用于演示目的 - 例如：

li{ background:red;}
li:checked{
background:orange;}

我实际上想要使用普通的css解决方案并且需要更新li元素的样式（如果点击了它）（:active这样做，但仅仅是为了点击它，我需要它只要再次单击就保持更新的样式）

由于

Answer 1

对于纯CSS解决方案，唯一的方法是使用label和checkbox，并隐藏checkbox：

input{
    display:none;
}

label{
    color: blue;
}

input:checked + label{
    color: red;
}

<ul>
    <li>
        <input type="checkbox" id="cb">
        <label for="cb">click</label>
    </li>
    <li>
        <input type="checkbox" id="foo">
        <label for="foo">click</label>
    </li>
    <li>
        <input type="checkbox" id="bar">
        <label for="bar">click</label>
    </li>
</ul>

JSFiddle

或者，如果您想将某些样式更改为li，则：

input{
    display:none;
}

li{
    color: blue;
}

input:checked + ul>li{
    color: red;
}

<input type="checkbox" id="cb">
<ul>
    <li>
        <label for="cb">click</label>
    </li>
</ul>

JSFiddle

但是，如果您有多个checkboxes，并且希望将它们放在ul之外（不在同一个li中），那么它有点复杂：

input{
    display:none;
}

li{
    color: blue;
}

#cb:checked + input + input + ul>li:first-child{
    color: red;
}

#foo:checked + input + ul>li:nth-child(2){
    color: red;
}

#bar:checked + ul>li:nth-child(3){
    color: red;
}

<input type="checkbox" id="cb">
<input type="checkbox" id="foo">
<input type="checkbox" id="bar">
<ul>
  <li>
    <label for="cb">click</label>
  </li>
  <li>
    <label for="foo">click</label>
  </li>
  <li>
    <label for="bar">click</label>
  </li>
</ul>

JSFiddle

注意：有些答案将input[type=checkbox]作为ul的直接子项，无效 - 只有li可以是{{{}的直接子项1}}。

Answer 2

不要相信你可以在除了复选框之外的任何东西上跟踪纯CSS中的点击/非点击状态。我相信你最好的做法是连接一个JS事件监听器来点击列表项上的一个类。

Answer 3

我会通过在列表项之前设置一个不可见的复选框并将列表项的内容作为该不可见复选框的标签来实现此目的。

CSS

li { background:red; }
*:checked + li { background:orange; }
input[type="checkbox"] {
    display: none;
}

HTML

<ul>
<input type="checkbox" id="some_name"/>
<li><label for="some_name">The list item.</label></li>
</ul>

Answer 4

你可能想试试这个：

＆＃13;

＆＃13;

.my-ul  input {
  display: none;
  position: fixed;
  z-index: -1;
}
.my-ul li label{
  background: red;
}
.my-ul input[type="checkbox"]:checked ~ label {
  background: orange;
}

＆＃13;

<ul class="my-ul">
  <li>
    <input id="checkbox1" type="checkbox" name="checkbox" />
    <label for="checkbox1">
      Item 1. Click me to change color.
    </label>
  </li>
  <li>
    <input id="checkbox2" type="checkbox" name="checkbox" />
    <label for="checkbox2">
      Item 2
    </label>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;