ホームページ > 記事 > ウェブフロントエンド > CSS子孫セレクターの基本的な使用例を詳しく解説
CSS子孫セレクターの基本的な使用例を詳しく解説
- 高洛峰オリジナル
- 2017-03-07 14:43:392082ブラウズ
基本
子孫セレクターを記述する最も簡単な方法を見てみましょう。強いタグは 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 サイトの関連記事に注目してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。