问题描述
- CSS checkbox 对应多个label 怎么设置label样式
-
点击11111 22222 33333 44444都可以实现多选框选中，但是只有44444是单独的label ，11111 22222 33333十多个label对应一个多选框，CSS为input[type="checkbox"]:checked+label。只有44444能应用样式。
完整代码：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> input[type="checkbox"]:checked+label{ color: red; } </style> </head> <body> <table> <tr> <td><input type="checkbox" id="check"></td> <td><label for="check">11111</label></td> <td><label for="check">22222</label></td> <td><label for="check">33333</label></td> <br> <input type="checkbox" id="ch"><label for="ch">444444444</label> </tr> </table> </body> </html>
解决方案
+是相邻的节点选择器，你的111，,22这些节点和inuput又不是兄弟，
<style type="text/css">
input[type="checkbox"]:checked ~ label {
color: red;
}
</style>
</head>
<body>
<table>
<tr>
<td><input type="checkbox" id="check"><label for="check">11111</label><label for="check">22222</label><label for="check">33333</label></td>
<<td>
<input type="checkbox" id="ch">
<label for="ch">444444444</label>
</td>
</tr>
</table>
时间： 2024-11-02 21:10:58