CSS復選框：選中不起作用
[英]CSS checkbox:checked not working
問題描述
我正在嘗試使用復選框來更改表格中某些文本的顏色，但是它似乎不起作用。 ：checked屬性似乎不起作用。 文字在中。 代碼如下：
<html>
<head>
<style type="text/css">
.methodoption
{
}
#row1
{
color: blue;
}
#buyer1 + #row1
{
color: blue;
}
#buyer1 input[type=checkbox]:checked ~ #row1
{
color: red;
}
</style>
</head>
<body>
<div align="justify" style="font-size: 23px;">
Social compliance has changed a lot over the past few years. Several high-profile industry disasters in key sourcing countries like Bangladesh, along with heightened awareness among consumers about where their clothes come from, has prompted stakeholders all across the supply chain, from production facilities to brands and buyers, to rethink their approach to compliance and supply chain security. As part of our commitment to being a responsive and effective social compliance monitoring partner, we at WRAP wanted to get an idea of what some of these changes were and how we can adapt our own program to better meet those needs.</div><br/>
<div align="Center" style="Font-size: 29px;">WE TALKED TO <STRONG>50</STRONG> BUYERS, THOUGHT LEADERS,<br/>AND OTHER STAKEHOLDERS IN THE SOCIAL COMPLIANCE ARENA</div>
<div align="Center"><img src="infogfx.png" height="350" width="900"></div><br/><br/>
<table align="center" width="600" style="background-color: #aaaaaa;"><tr><td align="center"><em><strong style="font-size: 25px;">WHO ARE THEY?</strong></em></td></td>
<tr><td>In exchange for their participation in they survey, we have agreed to keep the identities of those who particiapted anonymous.</td></tr><table>
<form action="" method="post">
<table>
<tr><td><input type="checkbox" name="buyer1" id="buyer1"></td><td>1</td><td class="methodoption"><span id="row1">Stakeholder Expectations</span></td></tr>
<tr><td><input type="checkbox" name="buyer2a" id="buyer2a"></td><td>2(tie)</td><td class="methodoption">Factory Compliance/Strengthen Supply Chain</td></tr>
<tr><td><input type="checkbox" name="buyer2b" id="buyer2b"></td><td>2(tie)</td><td class="methodoption">Corporate Philosophy</td></tr>
<tr><td><input type="checkbox" name="buyer4" id="buyer4"></td><td>4</td><td class="methodoption">Integrity of Brand</td></tr>
<tr><td><input type="checkbox" name="buyer5a" id="buyer5a"></td><td>5(tie)</td><td class="methodoption">Risk Management</td></tr>
<tr><td><input type="checkbox" name="buyer5b" id="buyer5b"></td><td>5(tie)</td><td class="methodoption">Right Thing To Do</td></tr>
</table></form>
</body>
</html>
1 個解決方案
解決方案1
1 已采納 2014-05-29 18:38:28
顧名思義， 通用兄弟選擇器~選擇兄弟姐妹。 兄弟姐妹是在同一父對象中找到的元素。 您的input元素與#row1元素的td ，因此無法選擇。
為此，您需要將#row1元素包含在與input元素相同的td中：
<td>
<input type="checkbox" ... />
<span id="row1"> ... </span>
</td>
選中時的 CSS 樣式復選框 - 不起作用
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.