0

我有 -

<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;
}
4

2 回答 2

0

CSS 不能以您想要的方式“向上返回”，因此输入的检查状态不会影响整体标签。

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

input:checked+* {
  text-decoration: line-through;
}
<label for="1640801145364">
<input type="checkbox" value="foo" id="1640801145364" name="foo">
  <span>foo</span>
</label>

于 2021-12-29T19:31:59.593 回答
0

我看到您的 CSS，您认为foo文本将在输入中，但实际上并非如此，因为：<input>不需要结束标记，因此它们不能包含foo文本

所以首先是a中的一个foo文本，span所以使用CSS我们可以很容易地选择它

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

你可以用 ALT126 写

所以如果输入被检查...

...这~使我们不是对输入本身进行样式化，而是对我们想要的样式进行样式化（在这种情况下span）

编辑：确保您想要设置样式的所有内容都在输入之后，因为~无法选择以前的元素。

这里的代码

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>

于 2021-12-29T18:57:06.113 回答