問題タブ [css-specificity]

自分のコントロールのみを対象とする css リセットを作成しようとしています。したがって、HTML は次のようになります。

CSSは私が問題を抱えているものですが、現在これに取り組んでいます:

問題は、「.innerImg img」が「.container img」を上書きしないことです。では、「コンテナ」要素内のすべての要素のスタイルをリセットし、その要素内のクラスにスタイルを配置するための最良の方法は何でしょうか?

同じHTMLファイルでセレクターなどに同じ名前のCSSクラスを2つ使用することはできますか？もしそうなら、要素をスタイリングするときに2つをどのように区別しますか？

今日問題が発生した後、CSSクラスの優先順位について質問があります。状況は次のとおりです。

クラスが関連付けられている順序付けされていないリストがあります。LIタグにもいくつかのスタイルが定義されています。LIクリック後に（追加されたクラスを介して）sのスタイルを変更したいのです"selected"が、追加されたクラスのスタイルが適用されません。これは正常な動作ですか、それともこのコードは機能するはずですか？

CSS：

HTML：

"selected"リストアイテムの背景色は変更されません。これは、LI要素にスタイルを適用せずに、別のクラスを作成し、それをすべてのリストアイテムに適用して、読み取る場合にも当てはまります。

次のような「狭い」定義かどうか疑問に思いました

ただよりも解析する方が良い/速い

狭い定義が実際にCSSの速度に何らかの悪影響を与えると思われることをどこかで読んだのですが、どこにあるのか思い出せず、もうしばらく経っているので、それが重要かどうか、重要な場合はどの解決策かを明確にしたいと思いました。より良い/より速いです。

ありがとうございました！

以下を使用して、div内の最後のulの最後のリンク（a）をターゲットにします。だからこれが頭に浮かんだことです：

その要素に手動でクラスを追加することはできません。動的に追加したい場合でも、上記の方法で要素をターゲットにする必要があります。

これが機能しない理由はありますか？

テーマ タグを要素に統合して、異なる色で表示されるようにしたいと考えています。ただし、css セレクターは同じ css 特異性を持っているため、最新のものが以前に定義されたルールをオーバーライドします。

これは私の問題を示す例です:

そしてここに私のcss

ボックスはどこかにリストされているはずですが、別の色定義のサブ子になるとすぐに上書きされます。

助けてくれてありがとう！

セレクターの特異性を計算するには、3 つの数値を使用することを知っています。左側の最初の数値は ID の数、2 番目の数値はクラス、疑似クラス、および属性の数を表し、3 番目の数値は要素の数を表します。

次の数字は誇張されていることに気づきました... ID はクラスよりも具体的であり、クラスは要素よりも具体的ですが、特異性が 1.0.0 のセレクター (したがって ID が 1 つのセレクター) は、特異性が 0.222.0 のセレクターに勝つでしょうか ( 222 クラス/疑似クラスのセレクター)?

特異性の研究 私はこのブログに出くわしました - http://www.htmldog.com/guides/cssadvanced/specificity/

具体性は CSS のポイント スコアリング システムであると述べています。要素は 1 ポイント、クラスは 10 ポイント、ID は 100 ポイントの価値があることがわかります。また、これらのポイントが合計され、全体的な量がそのセレクターの特異性であると言う.

例えば：

body = 1点
body.wrapper = 11点
body.wrapper #container = 111点

したがって、これらのポイントを使用すると、次の CSS と HTML によってテキストが青色になることが予想されます。

1ID が 100 ポイントに等しいのに対し、15 クラスが 150 ポイントに等しいのにテキストが赤いのはなぜですか?

どうやらポイントは合計されただけではありません。それらは連結されています。詳細については、こちらをご覧ください - http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

これは、セレクターのクラスが0,0,15,0ORということ0,1,5,0ですか?

（IDセレクターの特異性が次のように見えることを知っているので、私の本能は前者であると私に言います0,1,0,0:)

次のコード worldで赤ではなく青になっているのはなぜですか?

の特異性.my_classはですが、( )で特異性の高い方0,0,1,0の色を継承する必要があります。#my_id0,1,0,0

大きな太字のキャップロック TL;DR:

私はセレクターの特異性がどのように決定されるかを知っています。それは欠陥のある仮定を使用していると思いますが、有効な集合理論の関係で私のイライラを裏付けることができます。特異性について W3 計算規則を説明することに応答しないでください。質問を読んでください <- それを読んでください。

これは、以下のような HTML のスタイルを作成するときに、しばらく気になりました。

特異性ルールがセレクター「#outer span」を「#inner」よりも具体的にするのはなぜですか? ID は一意なので、「#inner」と言うと、1 つの要素しか参照できないのに、なぜ具体性が低いのでしょうか? 具体性を判断する際のルールは理解していますが、これが意図的なものなのか偶発的なものなのか、CSS 標準を書いている人にこの質問をする方法を誰かが知っているのだろうかと思います。

私は #outer #inner を使用して最大の特異性を確保できることを理解していますが、それはそもそも ID の目的を無効にしているようです。これは、私がテンプレートを書いているときに問題のある解決策でもあり、ある ID が別の ID の中にあるかどうか確信が持てません。私は回避策を探しているのではなく、理論的な答えを探しているだけです。

私の質問は理論であり、完全に設定されたロジックに基づいています。私が持っているのは、n個の可能なアイテムの1つのアイテムのルールを定義する場合、それはできる限り具体的ではないということですか? CSS セレクターの作成者は、より具体的なルールとして、m が n のサブセットである場合に、n 個の可能なアイテムの m 個のアイテムを定義できるルールを作成するのはなぜですか?

私の考えでは、#id は 1 つのアイテムを名前で識別するのと同等であり、#id elm は名前でアイテムとの関係によってグループを識別します。名前付きのリレーションを持つ名前のないグループよりも具体的でない名前付きのアイテムを呼び出すことは、完全に直観に反しています。