ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS子孫セレクターの基本的な使用例を詳しく解説
基本
子孫セレクターを記述する最も簡単な方法を見てみましょう。強いタグは p タグの子孫に属し、i タグは強いタグの子孫に属します。
HTML コード:
<p> my name is <strong>li<i>daze</i></strong>, hahah. </p>
CSS コード:
p strong { font-size: 30px; } p i { font-size: 40px; }
1. 子孫セレクターでは、ルールの左側のセレクターにはスペースで区切られた 2 つ以上のセレクターが含まれます。
2. セレクター間のスペースは結合記号です。
3. 子孫セレクター、子孫の階層間隔は無制限です。子要素セレクターとの違いに注意してください。
例1
<html> <head> <style type="text/css"> ul em {color:red; font-weight:bold;} </style> </head> <body> <ul> <li>List item 1 <ol> <li>List item 1-1</li> <li>List item 1-2</li> <li>List item 1-3 <ol> <li>List item 1-3-1</li> <li>List item <em>1-3-2</em></li> <li>List item 1-3-3</li> </ol> </li> <li>List item 1-4</li> </ol> </li> <li>List item 2</li> <li>List item 3</li> </ul> </body> </html>
実行効果:
例2
<html> <head> <style type="text/css"> p.sidebar {width:100px;height:100px;background:blue;} p.maincontent {width:100px;height:100px;background:yellow;} p.sidebar a:link {color:white;} p.maincontent a:link {color:red;} </style> </head> <body> <p class='sidebar'> <a href ='#'>我是链接1<a/> </p> <p class='maincontent'> <a href ='#'>我是链接1<a/> </p> </body> </html>
実行効果
少し説明:
XML/HTML コードコピーcontent クリップボードへ
a:link {color: #FF0000} /* 未訪問のリンク */
a:visited {color: #00FF00} /* 訪問済みのリンク */
a: hover {color: #FF00FF} /* リンク上にマウスを移動します */
a:active {color: #0000FF} /* 選択されたリンク */
詳細 基本的な使い方の詳しい説明はこちらCSS の子孫セレクターの例については、PHP 中国語 Web サイトの関連記事に注目してください。