13

シナリオ

ラベルがクリックされたときにサブコンテンツを表示するはずの CSS セレクターがあります。input:checked + element + elementセレクターは、その最終要素にブロックの表示を与える方向に沿っています (デフォルトはなし)。問題は、webkit を除くすべての主要なブラウザーで動作することです。Chrome、Safari、および android 用のモバイル ブラウザー (v2.2 申し訳ありませんが、時代遅れです) はすべて要素を表示できません。Chrome で要素を調べると、本来あるべき要素であることが示されますdisplay: blockが、レンダリングされません。開発者ツールでプロパティのチェックを外してチェックすると表示されますが、表示される前には表示されません。

これは webkit のバグだと思います。

質問

ここにマルチパートの質問があります: これは webkit の既知のバグですか? セレクターに何か問題がありますか? また、Webkit ブラウザーの問題を回避するにはどうすればよいですか (創造的な提案があれば)。

コード

HTML

  <input id="c1" type="checkbox">
  <label for="c1">Ein</label>
  <section>Content</section>

  <input id="c2" type="checkbox">
  <label for="c2">Zwei</label>
  <section>Content</section>

  <input id="c3" type="checkbox">
  <label for="c3">Drei</label>
  <section>Content</section>

CSS

input {
  float:left;
  clear:left;
  visibility: hidden;
  position:absolute;
}

label {
  color:green;
  display:block;
  cursor:pointer;
}

section {
  display:none;
}

label:after {
  content:" +";
}

input:checked + label:after {
  content:" -";
}

input:checked + label + section {
  display:block;
}

デモ

デモ: http://jsbin.com/epibin/2
ソース: http://jsbin.com/epibin/2/edit

4

4 に答える 4

18

チェーンA疑似クラス

これは、このコードがバグを修正することを示しています (nth-child(n)どの要素にも一致しますが、チェーンに追加すると機能することに注意してください)。

input:checked + label:nth-child(n) + section {
  display:block;
}
于 2013-06-20T17:55:10.247 に答える
5

@ScottS は確かなソリューションを提供します。私のために働いた別の可能なものは、部外者の「なぜ彼らはそれをしたのか」という観点からより理にかなっています:

input:checked ~ section {
  display:block;
}

これは、後に続くすべての「セクション」を選択し、「input:checked」の兄弟です。

私のソリューションでは「ラベル」の位置にある要素も選択されるため、@ScottSのバージョンが優れていると考えることができる2つの条件があります:(1)「入力の兄弟#1と#2は同じ要素です(代わりに'label' & 'section') (2) '*' セレクターを使用して一般化しようとしています。

于 2013-08-28T22:49:47.303 に答える
3

バグ 45168に一致するように聞こえます – CSS 複数隣接兄弟セレクター シーケンスは、接頭辞が疑似クラス セレクターの場合は無視されます

<label>マークアップのand構造を交換すると<input>(それに応じて CSS を調整すると)、機能します。

http://jsbin.com/epibin/10/edit

（しかし、今は+ -トグルしないでください）

編集：

<label>and<section>を div コンテナーに入れると動作します: http://jsbin.com/epibin/12/edit

于 2013-01-07T18:27:18.810 に答える