CSSの高度な機能

1. CSS複合セレクター

1.ラベル固有のセレクター

タグ固有のセレクターは交差セレクターとも呼ばれ、複数のセレクターで構成されます。最初のセレクターはタグセレクター、2番目のセレクターはクラスセレクターまたはIDセレクターです。次のように、2つのセレクターの間にスペースを入れることはできません。 h3.specialまたはp＃one。
など：

<head>
  <meta charset="utf-8">
  <title>标签指定式选择器的应用</title>
  <style type="text/css">
     p{color:blue;}
     .special{color:red;}
     p.special{color:green;}
  </style>
</head>
  <body>
     <p>这是一段蓝色段落文本（普通）</p>
     <p class="special">指定了.special类的段落文本（绿色）</p>
     <h3 class="special">指定了.special类的标题文本（红色）</h3>
 </body>

2.子孫セレクター

子孫セレクタは、要素または要素グループの子孫を選択するために使用されます。その書き込み方法は、外側のレイヤーマークを前面に、内側のレイヤーマークをスペースで区切って書き込むことです。タグがネストされると、内部タグは外部タグの子孫になります。
たとえば、次のとおりです。

<head>
      <meta charset="utf-8">
      <title>后代选择器</title>
  <style type="text/css">
      p strong {color:red;}
        strong {color:blue;}
  </style>
   </head>
  <body>
    <p>段落文本<strong>嵌套在段落中，使用strong标记定义的文本（红色）。</strong></p>
    <strong>嵌套之外由strong标记定义的文本（蓝色）。</strong>
  </body>

子孫セレクターp strongによって定義されたスタイルは、<p>タグ内にネストされた<strong>タグにのみ適用されます。他の<strong>タグは影響を受けません。
子孫セレクターは2つの要素の使用に限定されません。さらに追加する必要がある場合要素の場合は、要素間にスペースを追加するだけです。

3.ユニオンセレクタ

ユニオンセレクターは、各セレクターをカンマで接続することによって形成されます。任意の形式のセレクター（タグセレクター、クラスセレクター、IDセレクターなど）を、ユニオンセレクターの一部として使用できます。一部のセレクターで定義されたスタイルがまったく同じか、部分的に同じである場合は、ユニオンセレクターを使用して、同じCSSスタイルを定義できます。
たとえば、次のとおりです。

<head>
     <meta charset="utf-8">
     <title>并集选择器</title>
     <style type="text/css">
          h2,h3,p{ color:red; font-size:14px;}
          h3,.special,#one{ text-decoration:underline;}
   </style>
   </head>
    <body>
        <h2>二级标题文本。</h2>
        <h3>三级标题文本，加下划线</h3>
        <p class="special">段落文本1，加下划线。</p>
        <p>段落文本2，普通文本。</p>
        <p id="one">段落文本3，加下划线</p>
   </body>

ここに画像の説明を挿入

第二に、CSSのカスケードと継承

1.スタッカビリティ

いわゆるスタッカビリティーとは、複数のCSSスタイルの重ね合わせを指します。
たとえば、次のとおりです。

<head>
     <meta charset="utf-8">
     <title>css层叠性</title>
    <style type="text/css">
          p{font-size:12px;font-family:"微软雅黑";}
          .special{font-size:16px;}
          #one{color:red;}
   </style>
   </head>
     <body>
          <p class="special" id="one">段落文本1</p>
          <P>段落文本2</P>
          <p>段落文本3</p>
   </body>

ここに画像の説明を挿入
タグセレクターpとクラスセレクタースペシャルの両方が段落テキスト1のフォントサイズを定義しますが、クラス選択の優先度はタグ選択の優先度よりも高いため、段落テキストはクラスセレクションスペシャルによって定義されたフォントサイズを示します。

2.継承

いわゆる継承とは、CSSスタイルシートを作成するときに、ワードマークが親マークの特定のスタイル（テキストの色やフォントサイズなど）を継承することを意味します。たとえば、body要素の本文のテキストの色が黒として定義されている場合、ページ上のすべてのテキストは黒として表示されます。これは、他のタグが
<body>タグの単語タグである<body>タグにネストされているためです。

継承を適切に使用すると、コードを簡略化し、CSSスタイルの複雑さを軽減できます。ただし、Webページのすべての要素が多数のスタイルを継承する場合、スタイルのソースを特定するのは難しいため、Webページのフォント、テキスト属性、およびその他の一般的なスタイルの継承を使用できます。たとえば、フォントサイズ、フォント、色、行間隔などをbody要素で均一に設定し、ドキュメント内のすべてのテキストに影響を与えることができます。

すべてのCSSプロパティを継承できるわけではありません。次のプロパティは継承できません。

①。ボーダー属性
②外側マージン属性
③内側マージン属性
④背景属性
⑤配置属性
⑥レイアウト属性
⑦要素の幅と高さ属性