CSS子孫セレクター

今回は CSS 子孫セレクターについて説明します。 CSS 子孫セレクターを使用する際の 注意事項 について、実際の事例を見てみましょう。

子孫セレクターは、子や孫などを含むタグのすべての子孫を選択するために使用されますが、子孫セレクターは、指定された親の子孫タグ (指定されたタグ要素の最初の世代の子要素) のみを選択します。

子孫セレクターは、追加の記号 (山括弧 > ) を使用して 2 つの要素間の関係を示します。

例: body>h1 は、 タグ内の第 1 世代の

タグをすべて選択します。

HTMLタグの関係図

HTMLコード

<h1>body里面的h1标题</h1>
<p>
    <h2>p里面的h2</h2>
    <p>
        p里面的p标签，p标签里面有一个<strong><a href="#">加粗的链接</a></strong>
    </p>
</p>
<h2>body里面的h2标题</h2>
<ul>
    <li>列表1
        <ul>
            <li>小列表a</li>
            <li>小列表b</li>
            <li>小列表c</li>
        </ul>
    </li>
    <li>
        <a href="#">列表2（带链接）</a>
    </li>
    <li>
        <a href="#">列表3（带链接）</a>
    </li>
</ul>

上記の構造を理解した後、次のコードを試すことができます:

CSSコード

body>h2 {
    color: orange;
}

上記HTML内部このコードには、合計 2 つの

タグがありますが、 には

の子孫が 1 つだけあり、もう 1 つの

は

内にあるため、上記の CSS コードのみが機能します。

タグで。

以下は、より興味深い子セレクターです

: first-child

最初の子タグを選択します。

CSS コード

このセレクターの機能は、まず Web ページ内のすべての

タグを検索し、

タグを通じてその親要素を検索します。 ; タグが親要素内にあるかどうか。

ここでは、の最初のタグが

なので、の子要素

は影響を受けません。

の

は

の最初の子要素なので、

の

はオレンジ色になります。

:last-child

このセレクターは :first-child セレクターに似ていますが、要素の最後の子を選択します。

CSSコード

h2:first-child {
    color: orange;
}

「小さいリストC」と「リスト3（リンクあり）」のフォントサイズが大きくなっているのがわかります。これら 2 つの項目は最後に指定された項目であるためです。

:only-child

は、要素の唯一の子を選択します。

HTML コード

li:last-child {
    font-size: 2em;
}

CSS コード

<p>
    <p>第一个p的p</p>
</p>
<p>
    <p>第二个p的第一个p</p>
    <a href="#">第二个p的第一个a</a>
</p>

上記のスタイルは、最初の

の

要素にのみ適用されます。 2 番目の

には

要素だけでなく 要素も存在するため、2 番目の

の

要素は上記のスタイルの影響を受けません。

このセレクターは理解するのが難しいです。このセレクターによって定義されたスタイルは、指定されたタグが別のタグの唯一の子孫である場合にのみ有効です。つまり、指定したタグが子孫に 1 つだけ存在するだけでは不十分です。指定したタグに他の兄弟タグがある場合、このセレクターで定義されたスタイルは無効になります。

:nth-child

このセレクターは使用がより複雑ですが、特に便利でもあります。

このセレクターは、2 つの項目で区切られたテーブル内の行、2 つの項目離れたリスト内の項目、または他の番号で区切られた子要素のスタイルを簡単に定義できます。

このセレクターには、どの子孫が選択されるかを決定する値が必要です。

最も単純な値はキーワード、つまり奇数と偶数です。

1. odd用于选取奇数子代元素。

2. even用于选取偶数子代元素。

HTML代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

CSS代码

li:nth-child(odd) {
    background: pink;
}
li:nth-child(even) {
    background: teal;
}

第一个子元素的下标是 1。

需要注意的是，如果在第一个

之前还有其他元素，那第一个

的下标就不是1了。
比如

HTML代码

<ul>
    <a href="#">a</a>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

这时的效果是

li:nth-child(odd) 的意思是找到

元素的父元素，通过父元素来检测每一个

的下标的奇偶。

因为

的第一个元素是，第二个元素才是
• 。也就是说，第一个
• 的下标是2，所以第一个下标赋的样式是绿色的背景。

  使用上面的方法可以让表格里的各行交替使用不同的样式特别简单。不过，:nth-child() 还有一些更妙更强大的用法。

  可以给 :nth-child() 指定一个数字，精确选择某个子代。比如说要让第4个

• 的背景色改成橙色。

  HTML代码

  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
  </ul>

  CSS代码

  li:nth-child(4) {
      background: orange;
  }

  

  同样的，这里的 li:nth-child(4) 的意思，是找到

• 标签的父元素，然后查找父元素的第4个子元素。

  如果HTML代码是下面这样，CSS代码不变的情况下。

  HTML代码

  <ul>
      <a href="#">a</a>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
  </ul>

  效果就会变成这样：

  

  会选中第3个

• 。因为第3个
• 在其父元素里面是排第4的。

  如果想每隔2个项目选中第三个项目，可以在数字后面加上字母n。

  HTML代码

  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>0</li>
  </ul>

  CSS代码

  li:nth-child(3n) {
      background: orange;
  }

  

  每当遇到3的整数倍的那个元素，就会应用规定的样式。

  如果想从第二个子代元素开始算起，选取每隔2个元素的第三个子代元素。可以在3n后面加个2。

  HTML代码

  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>0</li>
  </ul>

  CSS代码

  li:nth-child(3n+2) {
      background: orange;
  }

  如果想从第5个开始算起，每隔2个元素的第三个子代元素更改样式。

  CSS代码

  li:nth-child(3n+5) {
      background: orange;
  }

  

  如果想反向遍历，n前面的倍数就要修改成负数。

  CSS代码

  li:nth-child(-n+3) {
      background: orange;
  }

  

  意思是：从列表的第三个条目算起，选取在此之前的每个条目。

  如果想从第4个元素开始，往下选取所有元素。可以这样写：

  CSS代码

  li:nth-child(n+4) {
      background: orange;
  }

  

  以下是子代选择符总览表

  

  

  

  

  

  

  

  

  

  

  

  

  この記事の場合、よりエキサイティングな情報については、お支払いくださいphp 中国語 Web サイトの他の関連記事にも注目してください。

  推奨読書:

  CSSの配置プロパティの詳細な説明
  

  css3で細い線を1ピクセルより小さくする方法
  

  以上がCSS子孫セレクターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。