ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS3 の構造擬似クラス セレクター—:first-of-type は有名な引用タグを実装します (コード例)
1. CSS の構造擬似クラス セレクターである nth-child の使い方をマスターします。
1. 達成します。次の効果と、純粋な DIV CSS を使用するには、構造擬似クラス セレクター (first-of-type) を使用する必要があります。
追加メモ:
1、全体の幅は 500
2. 各有名な引用タグの間隔は 20、内部間隔は 25、フォントは筆記体です
##次に、具体的な操作を実行しましょう1. 素材の準備: 新しい画像ディレクトリを作成し、管理しやすいように素材をここに保存します。この場合、素材はファイル画像です。 "159184945152075CSS3 の構造擬似クラス セレクター—:first-of-type は有名な引用タグを実装します (コード例)")
<!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 タグのフォントが赤くなるようです
<!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>実行結果は次のとおりです。 :
結果から、すべての段落のフォントが赤くなっていることがわかりました。なぜなら、各 p が.word コンテナの最初の子要素!
最初の .word コンテナに別の p を追加して、結果を確認してみましょう:p:first-of-type{
color:red;
}実行結果は次のとおりです: 
##したがって、p:first-of-type スタイル コードは実際には、コンテナ内の最初の子要素であり、型が P でマークされているすべての要素を意味していることがわかります。 ！ ！
1. 構造疑似クラス セレクター (first-of-type) の使用法を学習しました。その機能は、指定された型と一致し、最初の子要素を親コンテナーに配置することです。これらすべての要素を使用すると、結果は複数になる可能性があります。 ！ ！
以上がCSS3 の構造擬似クラス セレクター—:first-of-type は有名な引用タグを実装します (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。