問題タブ [css-specificity]

私が理解しているように、要素は最も具体的ではありません。(要素と ID)。一般的にセレクターの特異性を理解するのを手伝ってください。

http://jsfiddle.net/t2RRq/

スタイルシートには2つの競合するルールがあります。

関連するHTMLは次のとおりです。

なぜ#child赤ではなく青なのですか？

スコアリングシステムを正しく適用しているかどうかはわかりません。これが私がそれをした方法です：

• ルール＃1にはIDとタグがあるため、スコアは次のようになります。[0, 1, 0, 1]
• ルール＃2にはIDしかないため、スコアは[0, 1, 0, 0]
• したがって、ルール＃1が勝ち、それは青です

しかし、これは私には間違っているようです。最初のルールは複数の要素に一致します。2番目のルールは1つにしか一致しません！では、2番目のルールはより具体的ではありませんか？

重複の可能性:
CSS 固有のポイント

これが私が意味することの例です：

http://jsfiddle.net/BTJXt/9/

どういうわけか、1 つの ID は一見無数のクラスを打ち負かします。これはどのように計算されていますか？

不透明度で特異性の競合が発生したときに、ナビゲーションバーボタンを設計していました。！importantオーバーライドを使用しましたが、機能していないようです。理由について何か手がかりはありますか？

HTML：

CSS：

この後、私が得るのは空白の灰色の背景です（背景色のスタイリングのため）。スパンをdivにネストしない方がはるかに理にかなっていることはわかっていますが、アニメーションの目的でネストする必要があります。

私は互いに続く2つのCSSルールを持っています：

HTMLスニペットは次のとおりです。

これらは両方とも同じテーブルセルに適用されることになっています。クラスのないものはフォールバックとして意図されています。しかし、何らかの理由で、常に最初のルールを2番目のルールよりも選択しています。Firebugで最初のものを無効にすると使用されるので、2番目のものが機能することを知っています。

ここで何が欠けていますか？

これは CSS の特異性に関する非常に単純な問題ですが、どうにかして理解することはできません。

私のスタイルシートには、リストからリスト スタイルを削除する単純なルールがあります。

次に、いくつかのリストについて、リストスタイルを指定したいのですが、何があっても上記のルールを上書きしないのでしょうか?

問題は、UL が CMS の WYSIWYG ボックスに入力されることが多く、ユーザーに html で記述して UL に特定の ID を付与するように強制したくないため、多くの場合、次のようなコードになってしまうことです。なので：

これが機能していないことに少し驚いています。javascript を使用して $('#product ul') に特定のクラスまたは CSS スタイルを与える以外に、これを改善する方法はありませんか?

--

JSBIN: http://jsbin.com/ohuzuz/4

--

編集：おっと、すみません、私は持っていました：

私の元のコードではなく、jsbin にあった一時的な間違いです。私の間違いですが、問題は確かに無効でした

レスポンシブ Web デザインと「モバイル ファースト」の方法を念頭に置いてブログを再設計しています。要するに、最小幅を使用して、あらゆる種類のレプリケーションや CSS を回避しようとしています。表示なし: なしなど..

私の問題は、CSS 値を上書きする必要がある場合、最小幅の低い方が優先されることです。例：

600px 以上の解像度で 2.2em h2 を取得することを期待しますが、代わりに 1.7em を取得します。私の開発ツールでは、2.2em 宣言が存在することがわかりますが、他の宣言が優先されます。 . 意味がない！

より強力なセレクターや最大幅を使用せずに、最小幅を使用し続け、より高い解像度で宣言を効果的に上書きできますか..?

どうしてこの2つが同等にならないのですか？最初の行は緑色の行を示していますが、2番目の行は表示されていません。唯一の違いはhtmlcにあります。さらに、n番目の子セレクターの特異性は何ですか？

-vs-

次のように、特定の CSS ファイル/文字列を JSON オブジェクトに解析しました。

私が今やりたいことは、特定性に基づいてそれらを再注文することです。この場合、JSON オブジェクト#header h1の は の後に来る必要があります。これは、ブラウザーでの適用方法です。h1

これどうやってするの？このための既存のライブラリはありますか? または、これを支援する便利なライブラリはありますか?

これを行うには、Javascript/jQuery または PHP の両方を使用できます。私は実装のアドバイスを探しています。うまくいけば、これはすでに行われています!

私の主な目標は、特異性に基づいてCSSスタイルブロックを並べ替えることです。私は以前にSOの助けを借りていましたが、なんとかこの関数を作成することができました。要旨を参照してください。

次に例を示します。

私がこのCSSに出くわすまで、上記はうまく機能してきました。

これはこれに並べ替えられます：

ただし、これはブラウザがCSSを適用する方法ではありません。

私の特異性関数は、セレクターの特異性に基づく順序付けではなく、CSSの順序付けの重要性を見逃している可能性があると思いますか？これは本当ですか？

アップデート

私がすべきことは比較機能にあると思います10。特異性はセレクターだけに基づくのではなく、セレクターの順序にも基づくため、常に言いたいことを追加する必要があります。だからこのようなもの：

これはどのように見えますか、そしてこの場合に与えるポイントの数をどのように決定しますか！？