10

<li>アクティブな要素の説明を変更する方法を理解しています

li:active {
...declarations...
}

しかし、アクティブではない他のすべての要素を変更するにはどうすればよいですか?

たとえば、すべての要素が太字になっていますが、そのうちの 1 つを選択すると、他のすべての要素が通常の状態に戻ります。

ありがとう！

4

5 に答える 5

21

li:not(:active)少なくとも理論的には機能するはずだと思います。

于 2010-12-06T16:36:51.107 に答える
8

それらすべてにルールを適用してから、別のルールをアクティブに適用します。

li {
   color: blue;
}

li:active {
  color: red;
}

結果: 非アクティブなものは青です。

于 2010-12-06T16:37:24.390 に答える
3

あなたの質問を読み直した後、本当の答えは、CSS だけを使用して要素がユーザーの操作でどのように動作するかを制御できないということだと思います。

スタイルはすぐに適用され、DOM の要素は通常:active デフォルトでは適用されないため、これは機能しないことがわかりました。

li {
    font-weight: bold;
}

li:not(:active) {
    font-weight: normal;
}

さらに、:not()CSS3 疑似クラスであるため、古いブラウザーを考慮する必要がある場合、現時点ではサポートが不十分です。

たぶん、JavaScriptでこれを行うことができます（ここではjQueryを使用しています）...

$('li').click(function() {
    $(this).siblings().css('font-weight', 'normal');
});
于 2010-12-06T16:47:50.160 に答える
2

私が正しく理解していれば、これでうまくいくはずです。

li{  font-weight:bold; }

:active li{ font-weight: normal; }

:active li:active{ font-weight: bold; }

したがって、基本的には、すべてを通常に切り替えてから、同じくアクティブなliに対してそれをオーバーライドする、親のアクティブ状態が必要です。

于 2010-12-06T18:23:32.763 に答える
0

あなたの例に基づいてブラッドの答えを拡張するには：

いずれかがクリックされるまで、すべて<li>の を太字にしたいですか? 次から始めます。

li { 
  font-weight: bold; 
}

次に、リスト項目がクリックされた場合、その 1 つを太字のままにして、他の項目を規則的にします。

li:active ~ li {
  font-weight: normal;
}

~ は、アクティブな li 自体を選択せず​​に、アクティブな li の兄弟であるすべての要素を選択します。

于 2010-12-06T16:41:11.763 に答える