如何为包含 <input> 元素的标签设置 "text-decoration: line-through" 样式？

Question

我有-

<label for="1640801145364"><input type="checkbox" value="foo" id="1640801145364" name="foo">foo</label>

我需要为包含在元素内部的标签设置“text-decoration: line-through”样式（在 file.css 中）。我试着在 file.css 中写下一个，但它对我没有帮助。

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

Answer 1

我看到你的 CSS，你认为 foo 文本会在输入中，但实际上不是 那是因为：<input> 不需要结束标签，所以它们不能在 foo text

内

所以首先是 foo 文本 span 所以使用 CSS 我们可以很容易地 select 它

然后我使用了 CSS COMBINATOR ~ https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_combinator

you can write it with ALT126

所以 if 输入 checked ...

...~ 让我们不再为输入本身设置样式，而是 为我们想要的设置样式（在本例中为 span）

编辑：确保您想要设置样式的所有内容都在输入之后，因为 ~ 不能 select 前面的元素。

这里是代码

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <label for="1640801145364">
        <input type="checkbox" value="foo" id="1640801145364" name="foo"> 
        <span>foo</span>
    </label>
</body>

</html>

Answer 2

CSS 不能 'go back upwards' 以您希望在此处执行的方式进行，因此输入的检查状态不会影响整体标签。

有几种方法可以解决这个问题。您可以将标签中的输入换成它之前的标签，但这当然会改变外观。相反，此代码段将标签的内容放在 span 元素中，然后输入的状态会影响其样式，因为新元素是后续的兄弟元素。

input:checked+* {
  text-decoration: line-through;
}

<label for="1640801145364">
<input type="checkbox" value="foo" id="1640801145364" name="foo">
  <span>foo</span>
</label>

如何为包含 <input> 元素的标签设置 "text-decoration: line-through" 样式？

How set "text-decoration: line-through" style for a label that has inside an <input> element?

css

checkbox

styles

line-through

这里是代码