CSS3 の構造擬似クラスセレクター—:first-of-type は有名な引用タグを実装します (コード例)-CSSチュートリアル-php.cn

CSS3 の構造擬似クラスセレクター—:first-of-type は有名な引用タグを実装します (コード例)

易达

リリース： 2020-06-11 15:58:53

オリジナル

2503 人が閲覧しました

この記事の目的:

1. CSS の構造擬似クラスセレクターである nth-child の使い方をマスターします。

質問:

1. 達成します。次の効果と、純粋な DIV CSS を使用するには、構造擬似クラスセレクター (first-of-type) を使用する必要があります。

CSS3 の構造擬似クラスセレクター—:first-of-type は有名な引用タグを実装します (コード例)

追加メモ:

1、全体の幅は 500

2. 各有名な引用タグの間隔は 20、内部間隔は 25、フォントは筆記体です

##次に、具体的な操作を実行しましょう

1. 素材の準備: 新しい画像ディレクトリを作成し、管理しやすいように素材をここに保存します。この場合、素材はファイル画像です。

CSS3 の構造擬似クラスセレクター—:first-of-type は有名な引用タグを実装します (コード例)

2.index.htmlを作成し、構造を記述します構造の分析方法

アイデア分析:

1. 目標は3つのパートに分かれており、各パートは実際に名言を表示することになります左側に境界線がありますが、最初の部分では、first-of-type を使用して実装できます。その機能は、指定された型の位置を最初の子要素のすべての要素に設定することであるためです。

わかりました。、まず分析に従ってアイデアを書き留め、当面は css の実装を無視します

コードは次のとおりです:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>结构性伪类选择器—:first-of-type</title>
</head>

<body>
    <div class="container">
        <div class="word">
            <p>只有自己诚心待人，别人才有可能对自己以诚相待。——路遥《平凡的世界》</p>
        </div> 
        <div class="word">
            <p> 什么是人生？人生就是永不休止的奋斗！只有选定了目标并在奋斗中感到自己的努力没有虚掷，这样的生活才是充实的，精神也会永远年轻。——路遥《平凡的世界》</p>
        </div>
        <div class="word">
            <p>生活啊，生活！你有多少苦难，又有多少甘甜！天空不会永远阴暗，当乌云退尽的时候，蓝天上灿烂的阳光就会照亮大地。青草照样会鲜绿无比，花朵仍然会蓬勃开放。——路遥《平凡的世界》</p>
        </div>   
    </div>
</body>

</html>

ログイン後にコピー

3. スタイルを記述し、css フォルダーを作成します、その中に新しいindex.cssを作成し、その中にスタイルを記述する方法は次のとおりです

#アイデア分析:

すべてのelements.containerの共通スタイル*

#1. 一部の要素には独自のデフォルトのパディングとマージンがあり、覚えにくいため、アイデアへの影響を避けるために、それらの要素を統一しました。デフォルト値は 0 に設定され、その後設定されます。任意の値に設定し、それを要素内で個別に設定します。

したがって、次のコードをindex.cssに追加します。

.container *{
    padding:0;
    margin:0;
}

ログイン後にコピー

外部コンテナ

1. 要件によれば、幅は 500

なので、index.css に次のコードを追加します。 ##1. 背景色があり、左枠があり、下のテキストの間にギャップがあり、フォントは筆記体です

##2. 小さなアイコンが付いた背景画像、背景は繰り返されません

ということで、index.css に次のコードを追加します:

.container{
    width:500px;
}

ログイン後にコピー

最初のテキスト設定

1. 最初に使用する必要があるため、 -of-type と組み合わせます。この機能は、最初の .word を設定することです。これを使用して、色

2 を設定できます。特定の要件は、最初の .word のフォントを赤にすることであるためです

soindex.css 次のコードを追加します。

.word{
    background-color: rgb(255,243,212);
    border-left: 10px solid rgb(246,183,60);
    margin-bottom: 20px;
    padding: 25px;
    font-family: cursive;
    background-image: url(../images/CSS3 の構造擬似クラス セレクター—:first-of-type は有名な引用タグを実装します (コード例));
    background-repeat: no-repeat;
    background-size: 15px;
}

ログイン後にコピー

これまでのところ、index.css コードは次のとおりです。

.word:first-of-type{
    color:red;
}

ログイン後にコピー

次に、index.css を導入します。 Index.html

.container *{
    padding:0;
    margin:0;
}
.container{
    width:500px;
}
.word{
    background-color: rgb(255,243,212);
    border-left: 10px solid rgb(246,183,60);
    margin-bottom: 20px;
    padding: 25px;
    font-family: cursive;
    background-image: url(../images/CSS3 の構造擬似クラス セレクター—:first-of-type は有名な引用タグを実装します (コード例));
    background-repeat: no-repeat;
    background-size: 15px;

}
.word:first-of-type{
    color:red;
}

ログイン後にコピー

Run 効果は次のとおりです。

#CSS code.word:first-of-type を p に変更すると、次のようになります。 first-of-type, what will the result be? 文字通り、最初の p タグのフォントが赤くなるようです

CSS コードを変更します:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>结构性伪类选择器—:first-of-type</title>
    <link href="css/index.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="container">
        <div class="word">
            <p>只有自己诚心待人，别人才有可能对自己以诚相待。——路遥《平凡的世界》</p>
        </div> 
        <div class="word">
            <p> 什么是人生？人生就是永不休止的奋斗！只有选定了目标并在奋斗中感到自己的努力没有虚掷，这样的生活才是充实的，精神也会永远年轻。——路遥《平凡的世界》</p>
        </div>
        <div class="word">
            <p>生活啊，生活！你有多少苦难，又有多少甘甜！天空不会永远阴暗，当乌云退尽的时候，蓝天上灿烂的阳光就会照亮大地。青草照样会鲜绿无比，花朵仍然会蓬勃开放。——路遥《平凡的世界》</p>
        </div>   
    </div>
</body>

</html>

ログイン後にコピー

実行結果は次のとおりです。 :

CSS3 の構造擬似クラスセレクター—:first-of-type は有名な引用タグを実装します (コード例)