html - 影响 :active 上的多个类

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, ~ .顾名思义，它选择后续的兄弟元素。由于表格内的输入元素不是 sibling ，您需要选择表格元素，然后从那里选择输入元素:

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

Example Here

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

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