CSSスタイルとセレクターの使い方

<p style="font-size:20px; color:red">こんにちは</p>

<スタイル>
    p{フォントサイズ: 20px;色: 赤}    
</スタイル>

p{フォントサイズ: 20px;色: 赤}
<link href="xxx.css" type="text/css" rel="スタイルシート" />

p{color: red} /* 要素セレクター、すべての p 要素のスタイルを設定します*/
.red{color: red} /* クラスセレクター。要素内で class="red" によって参照されます*/
#user{color: red} /* id セレクターは、id="user" によって要素内で参照され、最大 1 回しか使用できません */

*{color: red} /*ユニバーサルセレクター、すべての要素のスタイルを設定します*/
h1,.red{color: red} /*セレクターをグループ化し、複数のセレクターに同時に同じスタイルを設定します*/

div p{color: red} /*子孫セレクター。<p> が息子、孫、ひ孫などであるかどうかに関係なく、<div> 内のすべての <p> 要素を選択します。<p> が <div> の子孫である限り*/
div>p{color:red} /*子セレクター、<p>を選択します。<p>は<div>の子である必要があります*/
div+p{color:red} /*隣接兄弟セレクター、<p>を選択します。<p>は<div>の後の最初の兄弟要素である必要があります*/
div~p{color:red} /*後続の兄弟セレクター。<div> の後のすべての <p> 要素を選択します。<p> は <div> の兄弟要素である必要があります*/

[attr] /*attr属性を含む*/
[attr=value] /*attr属性を持ち、属性値はvalue*/
[attr^=value] /*attr属性があり、属性値はvalueで始まります（valueがそれで始まっていれば問題ありません*/
[attr|=value] /*attr属性があり、属性値はvalueで始まり、valueと後続の部分は-で接続されます*/
[attr$=value] /*attr属性があり、属性値はvalueで終わります*/
[attr*=value] /*attr属性があり、属性値にvalueが含まれています（valueが含まれていても問題ありません）*/
[attr~=value] /*attr 属性があり、属性値には value という単語が含まれます。value は完全な単語である必要があります (他の単語とはスペースで区切られます)*/

button[type="button"] /*type="button"の<button>をすべて選択*/

a:link /*未訪問のすべての <a>* 要素/
a:hover /*マウスを<a>要素に移動する*/
a:active /*<a>がクリックされたとき*/
a:visited /*すべての訪問済み <a>*/

:focus /*フォーカスするとき*/
:checked /*選択された場合*/
:enabled /*利用可能*/
:disabled /*無効*/
:read-only /*読み取り専用*/

：集中{ }
入力:フォーカス{}

:empty{ } /*すべての空要素*/
p:empty{ } /*すべての空の<p>要素*/

p:first-of-type /*同じレベルの最初の <p>*/
p:nth-of-type(n) /*同じレベルのn番目の<p>*/
p:nth-last-of-type(n) /*同じレベル内の最後のn番目の<p>*/
p:last-of-type /*同じレベル内の最後の <p>*/
p:only-of-type /*同じレベルの唯一のもの<p>*/

p:最初のタイプ{色:赤}

<本文>
    <h1></h1>
    <p></p> <!--選択-->
    <p></p>
    <div>
        <h2></h2>
        <p></p> <!--選択-->
        <p></p>
    </div>
</本文>

p:first-child /* <p> と一致します。<p> は親要素の最初の子要素である必要があります */
p:nth-child(n) /*<p>に一致します。<p>は親要素のn番目の子要素である必要があります*/
p:nth-last-child(n) /*親要素のn番目最後の子要素である<p>に一致します*/
p:last-child /*親要素の最後の子要素である <p> と一致します*/
p:only-child /* <p> と一致します。<p> は親要素の唯一の子要素である必要があります */

p:最初の子{色:赤}

<本文>
    <h1></h1>
    <p></p>   
    <p></p>
    <div>
        <p></p> <!--選択-->
        <p></p>
    </div>
</本文>

p:before{ /*<p>の前にコンテンツを追加*/
    内容:「こんにちは」
}
p:after{ /*<p>の後にコンテンツを追加*/
    内容:「さようなら」
}

p:before{ /*<p>の前にコンテンツを追加*/
    内容:"こんにちは";
    表示: ブロック
}
p:after{ /*<p>の後にコンテンツを追加*/
    内容:"さようなら";
    表示: ブロック
}

p:前{   
    content:"hello "; /* 属性はセミコロンで区切られます*/
    display: block; /*追加されたコンテンツのスタイルを設定する*/
    フォントサイズ: 20px;
    色:赤
}

p:前{   
    content:""; /* content 属性は必須であり、テキストが追加されていない場合は空の文字列に設定できます*/
    display: block; /*ブロックレベルに設定し、幅と高さを設定する必要があります。その後、追加された背景画像を表示できます*/
    幅: 100ピクセル;
    高さ: 100ピクセル
    背景画像: url("1.png");
}

p:前{   
    コンテンツ："";   
    クリア: 両方
}

:before <=> ::before
:after <=> ::after