cssセレクターの優先順位まとめ！

この記事では、cssセレクターの優先順位とは何かを主に紹介します。

まず、誰もが css selector とは何かを知っておくべきですよね?

Web ページのデザイン時に CSS を使用して HTML ページ内の要素を 1 対 1、1 対多、または多対 1 で制御する場合は、CSS セレクターを使用する必要があります。

HTML ページ内の要素は、CSS セレクターを通じて制御されます。

簡単に言えば、セレクターは次のように理解できます。

各 CSS スタイル定義は 2 つの部分で構成され、形式は次のとおりです:

[code] Selector {style} [/code] {} より前の部分は「selector」です」。

「セレクター」は、{} 内の「スタイル」のオブジェクト、つまり「スタイル」が作用する Web ページ内の要素を指定します。

これで、css セレクター のカテゴリが何であるか簡単に理解できましたか?

1. タグ セレクター

body,div,p,ul,li...

2. クラス セレクター

class="demo"
class="demo_1"

3.

id="name",id="name_t"

4. グローバル セレクター

*

5. 組み合わせセレクター

.demo .demo_1
/*两选择器用空格键分开*/

6 、子孫セレクター

#head .nav ul li
 /* 从父集到子孙集的选择器 */

7. グループ セレクター

div,span,img {color:blue}
/*即具有相同样式的标签分组显示*/

8. 継承セレクター

div p
/*两选择器用空格键分开*/

9. 擬似クラス セレクター

link、visited、active、hover...
/* 链接样式,a元素的伪类，4种不同的状态*/

10. 文字列一致のための属性セレクター

^ $ *
/*分别对应开始、结尾、包含*/

11. サブセレクター

div>p
/* 带大于号>*/

12. CSS 隣接兄弟セレクター

h1+p
/*  带加号+ */

CSS 分類を完全に理解する必要があります。

カスケードとは?

スタック可能性: は、競合を処理する CSS の機能です。積み重ね可能性は能力です。複数のセレクターが同じ属性を記述する場合、この属性は誰に従うべきでしょうか?

それでは、

cssセレクターの優先順位を以下にまとめます!

css 優先順位の並べ替え:!重要 >ID セレクター> ブラウザのデフォルト属性> この並べ替えの根拠は、主に各セレクターに独自の重みがあり、各 CSS ルールに重み付けされた重みを使用して計算される重みレベルが含まれるためです。ウェイトのレベルが異なると異なるスタイルが生成され、異なるスタイルが Web ページに反映されます。

CSS ウェイトの詳細については、この記事を参照してください。

[

CSS における優先度の尺度は何ですか? CSS ウェイトの使用法についての紹介

]

フロントエンドについて詳しく知りたい場合は、PHP 中国語 Web サイト CSS ビデオ チュートリアル
、

Bootstrap を参照してください。チュートリアルなど、皆さんもぜひ参考にして勉強してください。

以上がcssセレクターの優先順位まとめ！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。