問題タブ [css-specificity]

私の質問は背景画像についてです。iPhone画面用のホームページをデザインしていて、モバイル版では少し違う画像を使いたいと思っていました。私のメディア クエリは個別の css ファイルではなく、index.html に埋め込まれていました。問題...メインのCSSイメージがクエリイメージを上書きしていました。余分なブラケットなどをチェックしました。メディア クエリがメインの CSS よりも優先されると思いましたか? メディア クエリを css リンク ファイルに入れていたら、望ましい結果が得られたでしょうか?

これが私のメインのcssコードです：

以下は私のメディアクエリコードです:

テーマのページネーションスタイルを変更しようとしているときに、cssの特異性に出くわしました。

ベーステンプレートとしてtwitter-bootstrapを使用していますが、ページ付けを変更したいと思います。

具体的には、will-paginateブートストラップに付属しているpaginationボーダーを削除したいと思います。

意志-ページ化/ブートストラップ

私はこれが必要です：

問題は、これをcustom.css.scssファイルで設定した場合、ブートストラップの特異性が私のものよりも高いことです（特異性に関するこの優れた説明を確認してください）。！importantを試して使用しましたが、それでも特異性は高くなりませんでした。

私は、同じ特異性のルールを使用することでこの問題を解決しました-等しい特異性で最後に来るものが重要であり、ちょうど置くものです：

しかし、私は境界線をまったく必要としないので、これはただのごちゃごちゃしたcssです...

あなたは何を提案しますか？

divのテキストボックスについては、上記のスタイルを定義しています。2は1よりも具体的ですが、レンダリングされる高さは30pxです。それはどのように機能しますか？

10 個のマークに対して特異性が高いのは、どのクラス セレクター ルールですか?

また

HTML:

CSS:

これは、問題を示す JS フィドルです: http://jsfiddle.net/UgkZY/

最初のルールが勝つと思っていたでしょう。3 x クラス + 1 x タイプではなく、5 x クラス。ただし、.AEF は 1 つのクラスとしてしか得点しないように見えるため、2 番目のルールが優先されます。

次のオンライン CSS 特異性計算機http://specificity.keegan.st/を使用すると、最初のルールが優先されると考えられます。実際、Chrome ブラウザでは 2 番目のブラウザが優先されます。

.ABC が実際に CSS の特異性の観点から 1 つのクラスと見なされることを誰かが明確にすることはできますか?

ところで、スパンセレクターを最初のルールに追加すると、それが勝ちます。

私の CSS 仕様によると、最初のものが勝つように見えます。

http://www.w3.org/TR/selectors/#specificity

LI.red.level /* a=0 b=2 c=1 -> 特異度 = 21 */

非常に紛らわしいと言わざるを得ません。

このチュートリアルからセレクターの優先順位について学びました。あるケースでは、これの動作を理解するのに苦労しています。HTMLに要素があります：

問題は、別のセレクターのプロパティがクラスのプロパティをオーバーライドすることです。

上の図に示されているように、クラスはあまり具体的でないセレクターによってオーバーライドされます。要素はinput[type="text"]、クラスよりも具体的ではないによって選択されます。私が見るこれらの振る舞いの背後にある唯一の理由は、.inputboxクラスが要素と一致していなくても、優先順位を決定する際にクラスも計算されるということです。

タイプセレクターがクラスセレクターをオーバーライドするのはなぜですか？

HTML：

CSS：

インラインカラースタイルの特異性が高いため、ホバーカラーは適用されません。divにIDを指定し、IDスタイリングで個々の色を適用した場合も同じ問題が発生します。ホバー以外の色を表示しながら、両方のdiv（またはそれ以上）でホバーの色の定義を共有したいと思います。これは多くの冗長なCSSなしで可能ですか？

これは私のコードです：

HTML

CSS

JavaScript

JSFiddleコードはこちら

したがって、CSSは#corner：hoverのたびに「#cornerbox」の不透明度を変更し、JavaScriptは疑問符（？）キーが押されるたびに「#cornerbox」のクラス「show」を切り替えます。

上記のCSSを次のように変更すると、次のようになります。

（？）キーを押しても不透明度は変更されませんが、「＃cornerbox」はクラス「show」を受け取ります。

他のすべての可能性は機能します。

これは機能します。

そして、これは機能します。

なんで？

前もって感謝します！

タセ

私は現在、ニコールサリバンのOOCSSグリッドモジュールのバリエーションを詳しく説明しています。これは、直系の子孫のレイアウトを決定するために単一のコンテナクラスのみを必要とします。これには、CSS3をサポートするブラウザーでのみ機能するという警告があります。

違いの例を次に示します。

バニラOOCSSグリッドルール：

私の縮小グリッドルール：

もう1つの重要な注意点は、要素の小数サイズが兄弟の数によってのみ決定されるという仮定です。これがこのコードの重要なポイントです（あちこちで明示的なサイズなしでよりスリムなHTMLを有効にするため）が、必要に応じて例外があります。不均衡な幅を持つこと。

セレクターの特殊性のため、OOCSSモジュールを単純に元に戻すことはできません。HTMLでunitXofYクラスを指定することは、デフォルトの仮定に優先するために特別に行われますが、実際には、セレクターはより強力であり、指定されたクラスを常にオーバーライドします。 。

私が探しているのは、特異性の実際的な効果を制限することなく、これらのセレクターに取って代わる最も簡単な、または最もエレガントな方法です。つまり、クラス以外の選択された要素について、常に正しいとは限らないという仮定をしてはなりません。

あなたがここで見ることができるように：

より高い特異性の代わりに、セレクター.wrapper-dropdown .labelが適用されています.wrapper-dropdown .dropdown li div.liwrap:hover

何故ですか？必要に応じて、osx10.8でChromeを使用しています

-編集

This Less：http
: //hastebin.com/feyurojusa.avrasmはこのcssにコンパイルされます：http：//hastebin.com/dihimuquju.css

そしてこの翡翠：http
： //hastebin.com/sipetaqigu.vhdlこのhtmlにコンパイルします：http：//hastebin.com/sufavolumo.xml

さらに、クリックイベントを処理するこの小さなJavaScriptがあります：http：//hastebin.com/sufavolumo.xml

cssとタグ付けされたいくつかの回答!importantは、特異性を支持しての使用を思いとどまらせます。なんで？