一、アットルール
@で始まる宣言文の一種で、セミコロン;最後に。文法はルール：@IDENTIFIER（RULE）;.
で、ルールは主にCSS参照の振る舞いを表現するために使用されます。https://www.cnblogs.com/wuyinghong/p/3700519.html
1、@ charset-スタイルシートで使用される定義された文字セットを
2、@ import--語ったCSSエンジン外部CSSスタイルシートを含めます
すべてのコンテンツは、XML名前空間接頭辞の使用を考慮しなければならないため3、@ namespace--語ったCSSエンジン
図4に示すように、ネストされたAT-ルール
（1）ルールのmedia--条件セット@。デバイスのクエリ条件は、メディアを使用することによって定義された基準を満たしている場合
（2）@フォントface--は、外部のフォントからのダウンロードについて説明し
（3）@ keyframes-- CSSアニメーションにおける中間ステップのシーケンスを説明
あなたが文書を印刷したいとき（4）@当ページでは、ファイルの変更のレイアウトを記述する。
（5）規則のsupports--条件セット@、ブラウザが与えられたルールを満たすために場合は、それがコンテンツに適用されます置きます
CSSスタイルシートの文書が与えられた基準を満たすために使用されている場合、ルールの（6）@ document--条件セット、コンテンツの全てに適用されます。
例子：
ドット{ 表示：インライン - ブロック。 高さ：1EM。 ライン -height：1 ; テキスト - 整列：左; 垂直 -align： - .25em。 オーバーフロー：隠されました; } ドット:: {前に 表示：ブロック; 内容： '... \ A .. \ A'。; 白 -space：事前ラップ。 アニメーション：ドットは、無限のステップを3S - の両方を起動します。 } @keyframesはドット { 変換{33％：移動Y（ -2EM）; } 66％{変換：移動Y（ - 1EM）を、} }
二、CSSルールが定義されています
P {色：赤、テキスト整列：センター;}
セレクタ中括弧{}の次の一組に続く、花は1つ以上の内部ブレース宣言文を有し、各使用するための宣言文「属性：値;」フォーム、コロン、セミコロンで終わります。
「* /」最後で「/ *」開始とコメント。
定義されたCSSルールは二つの側面が含ま：プロパティとセレクタを、リファレンス： http://phpstudy.php.cn/css3/
三、CSSプロパティ
参考： https://www.runoob.com/cssref/css-reference.html
四、CSSセレクタ
（追加セットの属性値の後ろに、 "重要！"）の重要な、インライン（1000）、ID（100）、クラス（10）、タグ（1）：CSSセレクタの重み。
CSSセレクタ優先：セレクタ重み計算、セレクタが重畳組合せ重量値。
同じ重量であれば、最後の負荷セレクタを選択し、同じ構成要素複数のアプリケーションもよいセレクタ、値の大きい優先権。
セレクタは、クラス=「AB C」に設定されている場合は、順序、およびロードモードA / CSSのB / Cの順でないセレクタA / B / Cに選びました。
図1に示すように、基本的なセレクタ
（1）タグセレクタ（セレクタ要素）
Pなどの直接書き込み要素タグ名、。*より特別には、それはすべての要素を選択していることです。
（2）クラスセレクタ
クラスが値を入力する要素の必要性のclass属性での.class、。
（3）IDセレクタ
idは要素のid属性値である#ID、。（HTMLページでは、同じIDで繰り返すことができます）
（4）属性セレクタ
要素[属性=値] [...]の基本的なフォーマットは、この属性を含める必要があるだろう「=値」の場合ではない部分は、要素を示しています。
複数の属性を同時に使用することができ、そしてここ拡大=〜=、| =、^ =、$ =、* =。
図2に示すように、誘導されたセレクタ
（1）子孫セレクタ
より多くのスペースは、DIV DIV Pとして、セレクタ名を分離したpに含まれるすべての要素を表し、いずれか含ま直接的または間接的に含まDIV。
（2）サブ要素セレクタ
>記号はDIV> P pはDIV内のすべてのサブ要素を示し、それは直接含めることができ、例えば、示しています。
（3）（通常）兄弟セレクタ
〜数が表され、例えば、DIV〜P P兄弟はdivの後、ピア要素のすべてを表しますが、divのp個の兄弟が含まれていません前に。
（4）隣接兄弟セレクタ
DIV + P DIV P隣接バック要素によって表されるような+記号、。（DIV Pと同レベルであり、pだけdivの背後にあります）
（5）及びセレクタを設定します
数は、DIVとして、表さで、pはすべてのdiv要素とp要素を表します。
（6）セレクタの交点
ドットを使用することで、例えば、唯一のh3.special <h3のクラス=「特別」>を示し、このようなタグ。
それは差がある真ん中、およびH3。特殊同じとスペースがないわけではないことに注意してください。
（7）擬似クラスセレクタ
：数字、セレクタは、同時に擬似クラスを複数用いてもよいです。
不足セレクターを補償するための疑似クラス。
（8）擬似要素セレクタ
彼は表し::、セレクタ要素だけダミーを使用することができます。
擬似要素の性質は、仮想要素を作成し、スタイルを適用することです。
します。https：//www.cnblogs.com/ringboow/p/11134373.htmlより転載