我有 -
<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;
}
uj5u.com熱心網友回復：
CSS 不能像您在這里想要的那樣“向上回傳”，因此輸入的選中狀態不會影響整體標簽。
有幾種方法可以解決這個問題。您可以將標簽中的輸入交換到它之前，但這當然會改變外觀。相反，這個片段將標簽的內容放在一個 span 元素中，然后輸入的狀態可以影響它的樣式，因為新元素是后續的兄弟元素。
input:checked * {
text-decoration: line-through;
}<label for="1640801145364">
<input type="checkbox" value="foo" id="1640801145364" name="foo">
<span>foo</span>
</label>uj5u.com熱心網友回復：
我看到你的 CSS，你認為foo文本將在輸入中，但實際上并不是因為：<input>不需要結束標記，所以他們不能在foo文本中
所以首先是一個帶有 CSS的foo文本，span我們可以輕松地選擇它
然后我使用了 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/397276.html