CSS セレクターの優先順位_html/css_WEB-ITnose

カテゴリ: WEB フロントエンド 時間: 2016 年 3 月 13 日

PHP プログラマー Lei Xuesong のブログに関する前回の記事では、CSS セレクターと一般的に使用される CSS プロパティと値について紹介しました。 。 CSSセレクターの優先順位について説明します。 CSSセレクターの優先順位とは何ですか?簡単に言うと、ブラウザは CSS セレクターで構成されるマッチング ルールを通じて、定義された複数の CSS 命令の優先順位を決定し、最も忠実な要素によって表示される属性値を決定します。次に、CSS セレクターの優先順位に関するルールを詳しく見てみましょう。

1. CSS セレクター ファイルを通じて導入されます。

(外部スタイル)

(内部スタイル) 内部スタイルシート

2. CSS セレクターの優先順位

a. インライン スタイル シートの重みは最大 1000

b. ID セレクターの重みは 100

c. クラス クラス セレクターまたは属性の選択HTML タグ セレクターまたは疑似要素セレクターの重みは 1

e. グローバル セレクター * の重みは 0

です。通常、重要なルールには最高レベルのルールがあります。カスタム CSS スタイルの優先順位は、CSS の継承およびブラウザーのデフォルトの CSS の優先順位よりも高くなります。

4. CSS セレクターの優先順位の具体例。

选择器	计算结果
* { }	0
p { }	1  (HTML标签选择器)
li:first-line { }	2  (HTML标签选择器,伪元素选择器)
div span { }	2  (2个HTML标签选择器)
ul ol+li { }	3  (3个HTML标签选择器)
h1 + *[rel=up] { }	11  (HTML标签选择器，属性选择器)
dl dt.red { }	13  (一个CLASS类选择器,3个HTML标签选择器)
h2.red.level { }	21  (两个CLASS类选择器,HTML标签选择器)
style=””	10,0,0  (行内样式)
#page	100  (ID选择器)
body #main .left p { }	112  (两个HTML标签选择器,ID选择器, CLASS选择器类)