2017-08-08 9 views
0

数学では、操作の順序はどの操作が優先されるかの基本的な概要を示し、この順序を無効にする方法として括弧を使用しています。たとえば、x + y * z = x + (y * z)ではなくx + y * z != (x + y) * zです。CSSセレクタの部分の優先順位付け

CSSでこの効果を達成する方法はありますか?どちらのセレクタが優先されるのですか。優先度の低いセレクタを強制的に優先させるにはどうしたらいいですか?

+0

AFAIRのロード順序が優先を定義し、あなただけの 'と遊ぶことができる!それはあなたが「セレクタが優先された」によって何を意味するか私には不明だ –

+0

をimportant'。 1つの複合セレクタには、一度に1つのサブジェクトしかありません。例えば、セレクタE F + Gは1つのサブジェクトGのみを持ち、順序が(E F)+ GかE(F + G)かどうかは関係ありません。これは[CSSセレクタで括弧を使用できますか?](https://stackoverflow.com/questions/5478920/are-parentheses-allowed-in-css-selectors)と重複していますか? – BoltClock

答えて

2

あなたはSpecificityと呼ばれている探しているもの。リンクされた記事はそれをとてもうまく説明します。

基本的に、セレクタの優先順位は、そのセレクタの具体的な内容に基づいて決定されます。幾分直感的な例として、.red.fruitの具体的なで、.fruitよりも2つのクラス名を持っています。したがって、あなたのCSSコードでは、.fruitセレクタが.red.fruitの後に来ても、より具体的なセレクタが優先されます。

複数のクラス名を持つだけでなく、それ以上のことがあります。あなたが想像しているように、異なるタイプののセレクタは、異なるレベルの優先順位を持っています。例えば、IDセレクタは、特定のIDを持つことができる(うまくいけばよい)ので、非常に限定的であると考えられます。一般的には、この順序は次のようになり、ほとんどの特定から少なくともまで:

インラインスタイル> IDセレクタ>クラス、属性、および擬似クラスセレクタ>要素と擬似要素

は間違いなくより多くのための記事を読みます情報今


、言ったことすべてが、私はそれが親指の良いルールとして、あなたは可能な限りあなたのセレクタは、少なくともとして特定作りを目指すべきであることを言及する価値だと思います。言い換えれば、IDセレクタやインラインスタイルを使用しないようにしてください。必要な要素を選択するために必要なクラス名の数を最小限に抑えてください。この原則に続き

は、あなたのCSSは、より長期的に柔軟かつ読みやすくすることができます。

1

HTML要素に対するCSSルールの効果を優先順位付けするさまざまな方法があります。以下に示すようにいくつかは、より具体的なセレクタを含むであろう:あなたは、より具体的なセレクタを含むされているため、上記の例で

section { background-color: red; } 

section.header { background-color: green; } 

を、ヘッダのクラスのセクションが優先されます。

その他の考慮事項は、CSSスタイルシート(インライン、埋め込み、および外部)を引き込む方法です。

この特定のケースでは、インラインCSSルールを含む要素が埋め込みCSSルールよりも優先されます。このルールは、外部スタイルシートで適用されるルールよりも優先されます。

これらの要因と考慮事項を考えれば、特定のルールに優先順位を付けるいくつかの異なる方法を思いつくことができます。

もっとここで読む: What is the order of precedence for CSS?

関連する問題