CSS子孫セレクターの基本的な使用例を詳しく解説

高洛峰
リリース: 2017-03-07 14:43:39
オリジナル
2081 人が閲覧しました

基本

子孫セレクターを記述する最も簡単な方法を見てみましょう。強いタグは 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>
ログイン後にコピー

実行効果:
CSS子孫セレクターの基本的な使用例を詳しく解説

例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=&#39;sidebar&#39;>
<a href =&#39;#&#39;>我是链接1<a/>
</p>

<p class=&#39;maincontent&#39;>
<a href =&#39;#&#39;>我是链接1<a/>
</p>
</body>
</html>
ログイン後にコピー

実行効果
CSS子孫セレクターの基本的な使用例を詳しく解説

少し説明:


XML/HTML コードコピーcontent クリップボードへ

  1. a:link {color: #FF0000} /* 未訪問のリンク */

  2. a:visited {color: #00FF00} /* 訪問済みのリンク */

  3. a: hover {color: #FF00FF} /* リンク上にマウスを移動します */

  4. a:active {color: #0000FF} /* 選択されたリンク */


詳細 基本的な使い方の詳しい説明はこちらCSS の子孫セレクターの例については、PHP 中国語 Web サイトの関連記事に注目してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート