Question

我正在尝试使用复选框来更改表格中某些文本的颜色，但它似乎不起作用。：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>

Answer 1

General Sibling Selector ~，顾名思义，选择兄弟姐妹。兄弟姐妹是在同一父母中找到的元素。您的input元素与td元素不在同一#row1下，因此无法选择。

为此，您需要在与#row1元素相同的td内包含input元素：

<td>
    <input type="checkbox" ... />
    <span id="row1"> ... </span>
</td>

CSS复选框：选中不起作用

1 个答案: