0

ラベル + チェックボックスの両方を別の td でラインスルーしようとしています。

私のコード例では、2 つのテーブルを作成しまし
た。両方の要素が td を共有しているため、これは機能していると思います。これを修正して、テーブル 1 の代わりにテーブル 2 をラインスルーできるようにする方法はありますか? ありがとう！

HTML:

<table id = "1">
    <tr>
        <td>
            <input id="oregano"  type="checkbox" class="checkedBox" />  
            <label for="oregano" class="checkedLabel">Oregano</label>  
        </td>
    </tr>
</table>

<table id = "2">
    <tr>
        <td><input id="oregano"  type="checkbox" class="checkedBox" /></td>        
        <td><label for="oregano" class="checkedLabel">Oregano</label></td>
    </tr>
</table>

スタイルシート:

.checkedBox:checked + .checkedLabel {
        text-decoration: line-through;
        color: blue
        }

フィドル
http://jsfiddle.net/gdmpz506/

4

2 に答える 2

1

これは、それぞれの構文が異なるためですtable。

2 番目にcheckboxandlabelを同じように入れると、問題なく動作します。（そしてもちろん、2番目のラベルが最初の要素を指さないように一意にします..）tdtableid

.checkedBox:checked + .checkedLabel {
    text-decoration: line-through;
    color: blue;
}
<table>
    <tr>
        <td>
            <input id="oregano-1" type="checkbox" class="checkedBox" />
            <label for="oregano-1" class="checkedLabel">Oregano</label>
        </td>
    </tr>
</table>
<table>
    <tr>
        <td id="checktd">
            <input id="oregano-2" type="checkbox" class="checkedBox" />
            <label for="oregano-2" class="checkedLabel">Oregano 2</label>
        </td>
    </tr>
</table>

http://jsfiddle.net/gaby/gdmpz506/1/のデモ

于 2014-11-23T20:48:34.077 に答える
0

表 1 で機能するのは、要素inputとlabel要素が兄弟、つまり同じ要素の子であるためです。親がたまたまtd要素であることは関係ありません。「次の兄弟」演算子を正しく使用しています+。(ここでは、ラベルだけを取り消したいと思っていると仮定しています。)

inputとの要素が兄弟でない場合、同じlabelことはできません。それらが異なるtd要素にある場合はできません。現在、そのようなケースを処理する CSS セレクターはありません。チェックボックスをチェックすると対応するラベルが取り消されるようにするには、JavaScript が必要です。

于 2014-11-23T21:12:02.290 に答える