在 :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, ~。顾名思义，它是 select 的后续兄弟元素。由于 table 内的输入元素是 而不是 兄弟姐妹，因此您需要 select table 元素然后 select 输入来自那里的元素：

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

Example Here

附带说明一下，如果您只想 select 文本输入元素，请使用属性 select 或 [type="text"]:

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

在 :active 上影响多个类

Affecting multiple classes on :active

html

css

text

css-selectors

在 :active 上影响多个 类

Affecting multiple classes on :active

html

css

text

css-selectors

在 :active 上影响多个类