Question

我正在尝试使div文本在选中的复选框上显示删除线，但是它不起作用。

我想在选中item-title之后触及input type="checkbox"。

这就是我现在拥有的：

input[type=checkbox]:checked+div {
  text-decoration: line-through;
}

<div class="list media-list">
  <ul id="todoList">
    <li class="swipeout"><label class="item-checkbox item-content swipeout-content">
              <input type="checkbox" id="test1" name="checkbox" value="2" />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title" for="test1">Test</div>
                  <div class="item-after">2019</div>
                </div>
                <div class="item-subtitle">Test text</div>
                <div class="item-text">By Test</div>
              </div>
            </label>
      <div class="swipeout-actions-right"><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a></div>
    </li>
  </ul>
</div>

Answer 1

+是直接兄弟选择器，标签不是一个。尝试input[type=checkbox]:checked~.item-inner .item-title：

input[type=checkbox]:checked~.item-inner .item-title {
  text-decoration: line-through;
}

<div class="list media-list">
  <ul id="todoList">
    <li class="swipeout"><label class="item-checkbox item-content swipeout-content">
              <input type="checkbox" id="test1" name="checkbox" value="2" />
              <i class="icon icon-checkbox"></i>
              <div class="item-inner">
                <div class="item-title-row">
                  <div class="item-title" for="test1">Test</div>
                  <div class="item-after">2019</div>
                </div>
                <div class="item-subtitle">Test text</div>
                <div class="item-text">By Test</div>
              </div>
            </label>
      <div class="swipeout-actions-right"><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a></div>
    </li>
  </ul>
</div>

这将选中复选框，然后~选择类为item-inner的兄弟姐妹，然后选择类为item-title的后代

删除框上的删除线文本

1 个答案: