問題タブ [css-specificity]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
css - z-index と複数の !important ルールに関する問題
!importantより具体的な宣言が別の宣言を上書きしていないケースに遭遇した人はいます!importantか? ベースCSSは次のとおりです。
そして、z-index をオーバーライドするために使用したいものは次のとおりです。
Windows で Chrome (または Safari) デバッガーを使用して調べると、.x-msgbox.x-floating宣言が上書きされ (取り消し線が引かれ)、x-floating宣言がアクティブになっていることがわかります。これは、css の特異性について私が知っていること、および簡略化されたテストに期待することとは異なります。
コード例:
私は Sencha を使用しているので、これは Chrome または Safari でのみ機能しますが、ここにjsFiddle リンクがあります(おそらく、Sencha のソースをホットリンクするのは適切ではありませんが、問題になるほど十分なビューを取得することはできません)。テストを実行するには、[日付を選択] ボタンをクリックし、ホイールの 1 つをドラッグして回転させます。メッセージボックスが表示されます。メッセージ ボックスを日付ピッカーと比較します (それぞれのトップ レベルの要素 — 本体の子要素。これを行う別の方法は、 class を持つ要素を探すことですx-floating)。
css - !important と CSS 固有性の関係
CSS specificity specificationを見ると、!importantルールの「ポイント」の数について言及されていません。
いつ別のものをオーバーライドしますか? 一方が他方の後に宣言された場合はどうなりますか? より重要であると宣言されているルールはどれですか? なんかパターンある？
見た目からすると、!importantそもそもより具体的なポイントがあるものに適用されます。しかし、膨大な数の ID をクラスで積み上げて深くネストして宣言するとどうなるでしょうか。でマークされた、あまり指定されていない別のルールで設定されたルールを上書きします!importantか?
css - 混乱を招く CSS 固有性ルールに関する質問 (SAMS Teach Yourself CSS in 24 Hours Second Ed. の書籍より)
これは、ブラウザが競合に適用するルールを決定する方法について本が提供する 5 つのルールのルール 2 です。
ID セレクターは、[インライン スタイル属性に次いで] 2 番目に具体的です。ルールに複数の ID がある場合、ID セレクターの数が最も多いルールが優先されます。
ルール 2 が何について話しているのか本当に理解できません。「ルールに複数の id がある場合」(単数形) と書かれています。ルールが 1 つしかない場合、競合や比較はどのように行われますか (「最大のルールが… 勝つ」)? 1 つのルールで異なる数の ID セレクターを使用するにはどうすればよいですか? また、ルールが 1 つしかない場合、競合はどこにあるのでしょうか?
誰かがこのルールを徹底的に説明できますか? Webデザインの基本を理解しようとしているので、助けてくれてありがとう
css - CSS and specificity - class vs ids
Consider the following html:
And the following css:
The 'Should be underlined' link is not underlined, shouldn't it be since it inherits both the class barLinks and the id rightbar. Also the '#rightBar a.barLinks' (0, 1, 1, 1) has more specificity than '#rightBar a' (0, 1, 0, 1), so it should override the latter right?
How else can I get the 'Should be underlined' link to be underlined without resorting to using any inline specifications (both css or html)
css - CSS の継承と特異性
css スタイルシートに問題があります。css スタイルの継承と特異性に絞り込みました。
現在（簡略化されています）<body>、次のような HTML があります。
現在、これは複数の Web サイトで使用する必要がある uni-login フォームの一部であるため、特定の unilogin スタイル用の個別のスタイルシートがあります。ただし、Web サイトのスタイルシート (style.css) では、次のように設定されています。
また、unilogin スタイルシート (unilogin.css) では、次のように設定されています。
ただし、これは style.css から継承された h1 スタイルをオーバーライドしません。代わりに置く#page-wrap h1.unilogin-h1{}と、うまく機能します。ただし、これはオプションではありません。変更できないスタイルシートがすべて異なる複数の Web サイトで動作する必要があるためです。
インラインhtmlスタイリングを使用せずに、2番目のスタイルシートで継承されたh1スタイルの特異性をオーバーライドする方法はありますか? (style="" html 属性の方が特異性が高いことはわかっていますが、スタイルをスタイルシートに保持することを好みます)。
ありがとう...
html - CSS !重要なルールがテキストの配置を上書きしない
これは私が持っているもののコンパクトなバージョンであり、Firefox 5 を使用すると、「text-align: left」で !important を使用しているにもかかわらず、リンクは中央に配置されます。私は !important が最高の特異性であり、他のすべてのルールを無効にしていると思っていたので、混乱してイライラします。
ここで何が問題なのですか？
javascript - text-decoration:none はテキストの装飾を削除しません
次のコードHTMLを検討してください 。
<span class='c1'>Home<sup id='id1'>[2]</sup></span>
CSS:
Home上付き文字には下線[2]がありませんが、下線があると思っていました。しかし、たまたま上付き文字にも下線が引かれています。ここで何が欠けていますか??
css - CSSの特異性に関する具体的な質問
CSSの特異性について非常に具体的な質問がありますが、これについては明確に理解できませんでした。 http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
矛盾しないプロパティ/属性を定義する2つのセレクターがある場合、両方の属性が引き続き適用されるか、またはその動作方法は、セレクター内で定義されているものを気にせずに、セレクターを比較するだけです。
だから私たちが持っている場合;
ここでは、両方のセレクターが「menu1」を参照していますが、無関係な属性（color / font-size）を定義しています。
だから私の質問は、特異性はまだ重要であり、2つのうち1つだけが考慮されるのですか？私の質問は、実際の実装がどのように行われるかについてです。
css - スタイルシートの順序に基づくCSSの特異性/優先度？
CSS3 Selectorsの仕様を簡単に調べましたが、この問題を回避する方法が見つかりませんでした。さらに、CSS宣言を移動したときに、この結果が変わるとは思っていませんでしたが、変わります。どんな助けでも素晴らしいでしょう。
css - 特定の要素の下でのCSSのリセットとオーバールール
Firefoxアドオンを使用して任意のページに挿入できる要素があります。
当然、それとその祖先は、そのページで定義されているCSSルールの影響を受けます。
これまでのところ、すべての属性について明示するだけで取得できますが、それでも、私の宣言は、より具体的なページ上の以前の宣言によって上書きされる可能性があります。
不必要に特定のセレクターを大量に混乱させたり、を使用したりせずに、特定の要素（ ）の下にあるすべての要素の属性をリセットし、この親要素の下にある宣言が確実に適用されるようにするに!importantはどうすればよいでしょうか。div#my_root_container_element
iFrameの使用は1つのオプションですが、可能であれば避けたいと思います。別の方法はありますか？アプリケーションを考えると、ソリューションはFirefoxでのみ機能する必要があります。
ありがとう。