問題タブ [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.

0 投票する
0 に答える
77 参照

javascript - JavaScript で CSS セレクターの特異性を調べる

重複の可能性:
特定性に基づいて一連の CSS セレクターをソートする

JavaScriptでcssセレクターの特異性を見つける方法を知っている人はいますか? ライブラリやブラウザのサポートはありますか?jquery が何かを提供してくれることを願っていましたが、ソース/ドキュメントを見た限り、何も見つかりませんでした。

自分で作成するのは難しくありませんが、実績のあるソリューションを希望します。css セレクター パーサーも役立ちます。

特定性によって同じ要素に一致する一連のルールをソートする必要があります。

http://www.w3.org/TR/selectors/#specificityのような特異性

0 投票する
2 に答える
1040 参照

html - CSSの特異性と非推奨のHTML属性

存在する場合、適用される次のスタイルの暗黙の特異性は何でしょうか。

specificity = 1,0,0,0それでも、適用されている他のスタイルを取得してオーバーライドしますか?それは適切なインラインスタイルとどのように連携しますか?つまり、どちらが優先されますか?

ブラウザstyle=""は無効な宣言よりも宣言を優先することに同意しましたか、それとも何か他のことが起こっていますか?

注意:このシナリオで適用する正しいスタイルを選択するメカニズムについては単純に興味がありますが、そのような宣言は推奨しません。

0 投票する
2 に答える
536 参照

css - CSS の特異性または継承?

ここで同様の質問を見てきましたが、私のケースに固有の質問は見つかりませんでした。

この記事を正しく読んだ場合: http://css-tricks.com/specifics-on-css-specificity/

何が起こっているのか、私には意味がありません。これが局所性、継承、または特異性によるものかどうかを誰かが説明できますか? 関係のない CSS はすべて削除しました。

CSS

HTML

白ではなく青のテキストのボタンになってしまいます。さて、a は要素なので、.button クラスよりも具体性が低いはずですよね?

御時間ありがとうございます。

0 投票する
7 に答える
116061 参照

html - インライン!importantをオーバーライドできますか?

あなたが持っている場合

スタイルシートでそれを上書きして表示させる方法はありますか?

できればこれに似たものを使用してください:

0 投票する
2 に答える
251 参照

javascript - 具体性に従ってCSSセレクターテキストを注文するJSライブラリはありますか?

重複の可能性:
特定性に基づいて一連の CSS セレクターをソートする

CSS セレクター テキストを最も具体的なセレクター テキストからあまり具体的でないセレクター テキストに並べ替える JS ライブラリが必要です。具体性はW3Cに従って指定されます。

そこにライブラリがない場合、JS または jQuery を使用して非常に簡単に記述できますか?

CSS セレクターのテキストはdiv#body .text.

0 投票する
3 に答える
5674 参照

html - 属性セレクターの特異性は何ですか?

属性セレクターの特異性はどうなっているのか疑問に思っています。例えば:

  • ID = 100 ポイント
  • クラス = 10 ポイント
  • HTMLタグ=1点

例:

この HTML では:

これら 2 つのセレクターのうち、どちらがより具体的ですか?

デモを確認してください http://tinkerbin.com/IaZW8jbI

0 投票する
3 に答える
5405 参照

css - 具体性を高めるための CSS クラスの繰り返し

CSS ドキュメントによると: http://www.w3.org/TR/CSS21/cascade.html#specificity

特異性は、(とりわけ) セレクター内の属性と疑似クラスの数によって定義されます。

それで、私の質問は、同じクラス名を何度も繰り返すことで特異性を高めることは可能ですか?

例えば:

だろう

~よりも特異性が高い

また

?

0 投票する
2 に答える
1014 参照

html - ホバリングのためのCSSの特異性

cssの特異性の問題があります。

「請求書なし」の場合はスタイルの色を変えたい<td>ので、ifステートメントでスタイルを設定します。請求書がない場合、スタイルはstyle = "id=\"no-bills\"";です。私はこれをcssで動作させるようにしました。ここで、ユーザーがその上にカーソルを合わせた場合、背景を赤にしたいので、cssを変更して追加しました#bill-list #no-bills td:hover。これは、カーソルをtd:hover合わせたときにさらに特異性を追加する必要があります。残念ながら、これは機能しません(背景は同じままです)。

これが私のCSSです:

これが私のコード(スニペット)です:

誰かアイデアはありますか?

0 投票する
1 に答える
4680 参照

html - cssborder-collapseが適用されない

内側のテーブルに境界線が表示されないようにするのに問題があります。

以下のhtmlでは、それはテーブル<table class="billing_history" id="billing_history0" >です。テーブルに最終的に行の上下の境界線だけを持たせたいのですが、それを機能させることができませんでした。実際、テーブルに適用する多くの境界線プロパティを取得できなかったようです。特に、border-collapse: collapse;cssで設定してみましたが、内側のテーブルには当てはまりませんでした。ただし、テーブル自体にスタイルタグを設定すると(つまりstyle="border-collapse: collapse;")、機能します。したがって、何らかの理由でborder-collapse: collapse;、cssのinは内部テーブルに適用されていませんが、他のプロパティ(つまりfont-size: 11px;)が適用されています。

誰かアイデアはありますか?HTMLとCSSは以下のとおりです...

私はあなたたちが持っているかもしれないどんな提案にも感謝します!

html:

css:

0 投票する
1 に答える
79 参照

css - 特異性の変化

#sidebar pスタイルの特異性は101(IDの場合は100、タグセレクターの場合は1)ですが、.introスタイルの特異性は10(クラスセレクターの場合は10ポイント)です。101は10より大きいため、#sidebarpが優先されます。.introを#sidebar.introに変更すると、その特異性が110に変更されます。

私はこれを変更しましたが、私の結果は来ていません

誰かが私を説明できますか?

出力:赤色、font-size-1.25em、font-family-Georgiaである必要があります