html - 复选框和同级选择器
问题描述
我正在使用标签作为Check-Boxes的掩码,当检查相应的复选框时,我需要更改标签的背景。这是我到目前为止所做的:
.viewbutton {
height: 48px;
width: 48px;
background-color: #FFFFFF;
border-radius: 50%;
margin: 0px 4px;
border: 0px;
border: 1px solid #CDCDCD;
cursor: pointer;
background-repeat: no-repeat;
background-position: center;
background-size: 24px;
position: relative;
display: inline-block;
}
#comparechk:checked+#comparebtn,
#editchk:checked+#editbtn,
#multiplechk:checked+#multiplebtn {
background-color: #005EFF;
outline: none;
}
<input type="checkbox" id="comparechk" class="chkhidden">
<input type="checkbox" id="editchk" class="chkhidden">
<input type="checkbox" id="multiplechk" class="chkhidden">
<label for="comparechk" id="comparebtn" class="viewbutton"></label>
<label for="editchk" id="editbtn" class="viewbutton"></label>
<label for="multiplechk" id="multiplebtn" class="viewbutton"></label>
解决方案
+
是相邻的兄弟组合子,所以A + B
表示直接跟随的B
元素,中间没有其他元素。A
你想要通用的兄弟组合器,~
#comparechk:checked ~ #comparebtn,
#editchk:checked ~ #editbtn,
#multiplechk:checked ~ #multiplebtn {
background-color: #005EFF;
outline: none;
}
推荐阅读
- python - 如何使用beautifulsoup4在python中的pre标签中获取文本?
- python - 从网站提取数据的代码问题
- sql - 合并语句 SQL 语法
- distributed - Raft 如何线性化?
- python - 打印仅包含第二个元素的列表
- r - 检查 R 中时间序列数据的连续性(日期)
- reactjs - 从 HTML 到 ReactJS 的汉堡菜单
- r - Stata 中是否有与“rwolf”命令等效的 R 包?
- azure-functions - 跨资源组的 Azure 函数 blob 触发器
- c# - 来自代码的队列 Azure devops YAML 管道不接受运行时参数