Question

我正在处理一个HTML项目，我添加了一个复选框，选中该复选框将高亮显示所有文本输入字段。唯一的问题是一些输入字段在表内，并且由于某种原因我不能用我的代码影响它们。任何帮助将不胜感激。

相关代码：

HTML：

<input type="checkbox" value="ShowAll" id="mut" />

<!--Tätigkeit-->
        <input type="text" class="tt" id="BT" />
        <input type="text" class="tt" id="MA" />

        <table id="tatigkeit">
            <tr><td><input type="text" class="tt" id="tBT" /></td><td><input type="text" class="tt" id="tEB" /></td><td><input type="text" class="tt" id="tTT" /></td></tr>
            <tr><td><input type="text" class="tt" id="tBT" /></td><td><input type="text" class="tt" id="tEB" /></td><td><input type="text" class="tt" id="tTT" /></td></tr>
            <tr><td><input type="text" class="tt" id="tBT" /></td><td><input type="text" class="tt" id="tEB" /></td><td><input type="text" class="tt" id="tTT" /></td></tr>
            <tr><td><input type="text" class="tt" id="tBT" /></td><td><input type="text" class="tt" id="tEB" /></td><td><input type="text" class="tt" id="tTT" /></td></tr>
            <tr><td><input type="text" class="tt" id="tBT" /></td><td><input type="text" class="tt" id="tEB" /></td><td><input type="text" class="tt" id="tTT" /></td></tr>
            <tr><td><input type="text" class="tt" id="tBT" /></td><td><input type="text" class="tt" id="tEB" /></td><td><input type="text" class="tt" id="tTT" /></td></tr>
            <tr><td><input type="text" class="tt" id="tBT" /></td><td><input type="text" class="tt" id="tEB" /></td><td><input type="text" class="tt" id="tTT" /></td></tr>
            <tr><td><input type="text" class="tt" id="tBT" /></td><td><input type="text" class="tt" id="tEB" /></td><td><input type="text" class="tt" id="tTT" /></td></tr>
            <tr><td><input type="text" class="tt" id="tBT" /></td><td><input type="text" class="tt" id="tEB" /></td><td><input type="text" class="tt" id="tTT" /></td></tr>
            <tr><td><input type="text" class="tt" id="tBT" /></td><td><input type="text" class="tt" id="tEB" /></td><td><input type="text" class="tt" id="tTT" /></td></tr>
            <tr><td><input type="text" class="tt" id="tBT" /></td><td><input type="text" class="tt" id="tEB" /></td><td><input type="text" class="tt" id="tTT" /></td></tr>
            <tr><td><input type="text" class="tt" id="tBT" /></td><td><input type="text" class="tt" id="tEB" /></td><td><input type="text" class="tt" id="tTT" /></td></tr>
            <tr><td><input type="text" class="tt" id="tBT" /></td><td><input type="text" class="tt" id="tEB" /></td><td><input type="text" class="tt" id="tTT" /></td></tr>
            <tr><td><input type="text" class="tt" id="tBT" /></td><td><input type="text" class="tt" id="tEB" /></td><td><input type="text" class="tt" id="tTT" /></td></tr>
        </table>

        <!--Anlieferungen + Geratschaften + Besondere Vorkommnisse-->
        <input type="text" class="tt" id="ANL" />
        <input type="text" class="tt" id="GER" />

CSS：

#mut:checked ~.tt
{
    background: #ffffaa;
}

我尝试过许多不同的方式，但它总是一样的。

Answer 1

您正在使用general sibling combinator, ~。顾名思义，它选择了后续的兄弟元素。由于表中的输入元素是而不是兄弟，因此您需要选择表元素，然后从那里选择输入元素：

#mut:checked ~ .tt,
#mut:checked ~ table input {
    background: #ffffaa;
}

Example Here

作为旁注，如果您只想选择文本输入元素，请使用属性选择器[type="text"]：

#mut:checked ~ table input[type="text"] {}

影响多个类：活动

1 个答案: