input:checked + label；input:checked ~ label分别是什么意思

本文链接：https://blog.youkuaiyun.com/ozhy111/article/details/84329093

本文深入解析CSS中input:checked+label与input:checked~label选择器的使用场景与差异，通过实例展示了如何利用这些选择器实现对特定元素的样式控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

input:checked + label

input:checked ~ label

input:checked ~ label ：相邻同胞选择器，选择被勾选的input标签后所有的label标签［input 和 label标签有共同的父元素］；

input:checked ＋ label ：相邻同胞选择器，选择被勾选的input标签后第一个label标签［input 和 label标签有共同的父元素］；

//-------------------------------------------------------------------------------示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

#checked_1:checked+label{
background-color:red;
}

.checked_class:checked~label{
background-color:red;
}

</style>
</head>

<body>

</body>
</html>