10

この質問「jQuery の .click() のように機能する CSS3 セレクター?」では、要素の表示を切り替えるために,の状態を使用して回答を投稿しました。:checkedinputtype="checkbox"

これは、その回答で投稿したデモの HTML です。

<input type="checkbox" id="switch" />
<nav>
    <h2>This would be the 'navigation' element.</h2>
</nav>
<label for="switch">Toggle navigation</label>

そしてCSS（簡潔にするためにトランジションを取り除いています）：

#switch {
    display: none;
}
#switch + nav {
    height: 0;
    overflow: hidden;
    /* transitions followed */
}
#switch:checked + nav {
    height: 4em;
    color: #000;
    background-color: #ffa;
    /* transitions followed */
}

label {
    cursor: pointer;
}

JS フィドルのデモ。

回答を投稿したら、次のセレクターを使用して、そのチェックボックスの状態変更をトリガーするために使用される のテキストを切り替えることもできることに気付きました (のテキストを「ナビゲーション」にlabel修正しました)。label

label {
    display: inline-block;
    cursor: pointer;
}

#switch + nav + label::before {
    content: 'Show ';
}

#switch:checked + nav + label::before {
    content: 'Hide ';
}

簡略化された/基本的な JS Fiddle デモ。

これは機能しませんでした。つまり、inputがチェックされていない状態 (および がlabel表示されている) である間にセレクターが一致する一方で、 の状態が変更されたときにShow navigationセレクターが一致しませんでしinputた。遷移はまだnav要素に影響を与えており、元の一致するセレクターは、次の兄弟コンビネーターが最初に一致したことを示していることに注意してください。上記のリンクは、機能しない (Chrome 27/Windows XP で) セレクターの簡単なデモを示しています。

次に、セレクタチェーンを減らすために、一般的な兄弟コンビネータを試してみることにしました。その結果、次の CSS が生成されました (簡潔にするためにトランジションは削除されています)。

#switch:checked + nav {
    background-color: #ffa;
}

label {
    display: inline-block;
    cursor: pointer;
}

#switch ~ label::before {
    content: 'Show ';
}

#switch:checked ~ label::before {
    content: 'Hide ';
}

JS フィドルのデモ。

少し驚いたことに、これは機能しました (contentのlabelchanged-state に応答して が変更されましたinput)。

では、質問: 一般的な兄弟コンビネータは後の兄弟の更新を許可するのに、チェーン化された次の兄弟コンビネータ (要素と DOM の構造に一致する) は許可しないのはなぜですか?

さらに、これはFirefox (Windows XP では 21) でも動作するようです。だから私は質問が含まれるようにわずかに変更されていると思います:これはChrome/Webkitのバグですか、それとも予想される動作ですか?

さらに、これは Chrome のバグ (@Boltclock に感謝) ですが、動作しないデモを修正するややばかげた「何もしない」アニメーションがあるようです (ただし、Scott の回答が表示されます):

body {
    -webkit-animation: bugfix infinite 1s;
}
@-webkit-keyframes bugfix {
    from {
        padding: 0;
    }
    to {
        padding: 0;
    }
}
#switch {
}
#switch + nav {
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
#switch:checked + nav {
    background-color: #ffa;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
}
label {
    display: inline-block;
    cursor: pointer;
}
#switch + nav + label::before {
    content:'Show ';
}
#switch:checked + nav + label::before {
    content:'Hide ';
}

JS フィドルのデモ。

注：回答として投稿するのではなく、この「修正」で質問を更新している理由は、単に「どうすればこれを修正できますか？」という質問ではなかったからです。しかし、（基本的に）「なぜうまくいかないのですか？」

4

2 に答える 2

16

バグの回避策

どうやら、一緒にチェーンされた特定の有効な疑似クラスにより、それが機能するようになります。

これらは機能します ( Fiddle #1、Fiddle #2、Fiddle #3を参照):

#switch:checked + nav:only-of-type + label::before
#switch:checked + nav:nth-of-type(1) + label::before
#switch:checked + nav:nth-child(2) + label::before

これはしませんでした（Fiddle #4を参照）：

#switch:checked + nav:not([class]) + label::before

他の組み合わせをいくつか試し:not()ましたが、どれも機能しませんでした。

**最良の選択**

#switch:checked + nav:nth-child(n) + label::before
于 2013-06-20T17:34:57.940 に答える
9

これは、次の兄弟コンビネータを使用した特定の動的疑似クラスの使用に関連する、WebKit ブラウザーの長年にわたるバグです。これは、兄弟要素自体またはその兄弟要素の疑似要素にスタイルを適用している場合に発生します。

バグレポートを提出した人がまだいるかどうかはわかりませんが、これはサイトでかなり頻繁に見られます。

奇妙なことに、Chrome には一般的な兄弟コンビネータに問題があることも報告されていますが、ご指摘のとおり、指定されたシナリオで動作します。

したがって、それが修正されたか、他の何かがそれをトリガー/トリガーしました。

于 2013-06-20T17:06:58.783 に答える