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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

易达

Jun 11, 2020 pm 02:28 PM

css3

この記事の目的:

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 は有名な引用タグを実装します (コード例)

結果から、すべての段落のフォントが赤くなっていることがわかりました。なぜなら、各 p が.word コンテナの最初の子要素!

最初の .word コンテナに別の p を追加して、結果を確認してみましょう:

p:first-of-type{
    color:red;
}

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

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

##したがって、p:first-of-type スタイルコードは実際には、コンテナ内の最初の子要素であり、型が P でマークされているすべての要素を意味していることがわかります。！！

概要:

1. 構造疑似クラスセレクター (first-of-type) の使用法を学習しました。その機能は、指定された型と一致し、最初の子要素を親コンテナーに配置することです。これらすべての要素を使用すると、結果は複数になる可能性があります。！！

以上がCSS3 の構造擬似クラスセレクター—:first-of-type は有名な引用タグを実装します (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

FlexBox対グリッド：両方を学ぶべきですか？May 10, 2025 am 12:01 AM

はい、Youはrelearnbothlexboxandgrid.1）FlexBoxisidealforone-Dimensional、FlexiblleayoutslikenavigationMenus.2）Gridexcelsintwo-digsignssuchasmagazinelayouts.3）Bothenhanceslaysutibulivedibulisunivedivition、floctonsulururを

軌道力学（またはCSSキーフレームアニメーションの最適化方法）May 09, 2025 am 09:57 AM

独自のコードをリファクタリングするのはどのように見えますか？ジョン・レアは、彼が書いた古いCSSアニメーションを選び、それを最適化するという思考プロセスを歩きます。

CSSアニメーション：それらを作成するのは難しいですか？May 09, 2025 am 12:03 AM

cssanimationsArenotintinlentyhardbutrepracticeanderstanding ofcsspropertiesandtimingfunctions.1）

@KeyFrames CSS：最も使用されているトリックMay 08, 2025 am 12:13 AM

@keyframesispopularduetoitsversitility andpowerincreatingsmoothcssanimations.keytricksinclude：1）defingsmoothtransitionsbetweenstates、2）AnimatingMultipleProperiessimally、3）3）bendorprefixesforbrows -compativity、4）組み合わせwithjavasfo