CSS的子代選擇符

這次帶給大家CSS的子代選擇符，使用CSS的子代選擇符的注意事項有哪些，下面就是實戰案例，一起來看一下。

後代選擇符用於選取一個標籤的所有後代，包括子代和孫輩等；而子代選擇符只選取指定父輩的子代標籤（指定標籤元素的第一代子元素） 。

子代選擇符使用一個額外的符號（尖括號> ）來表示兩個元素之間的關係。

例如：body>h1 選取的是標籤裡的所有第一代

標籤。

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個< ;h2>標籤，但只有一個子代的

，另一個

是在

裡面的，所以上面的CSS程式碼只作用在第一個

標籤。

以下是比較好玩的子選擇子

#:first-child

#選取第一個子標籤。

CSS程式碼

h2:first-child {
    color: orange;
}

這個選擇符的作用是：先找到網頁中所有

標籤，透過

標籤找到其父元素，再判斷

標籤在其父元素中是否排第一個。

這裡因為的第一個標籤是

，所以的子元素

沒被樣式作用到。

因為

裡的

是

的第一個子元素，所以

裡的

變成了橘色字。

:last-child

這個選擇子與 :first-child 選擇子的作用類似，不過選取的是一個元素的最後一個子代。

CSS代碼

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

可以看到，「小列表C」和「清單3（有連結）」的字號變大了。因為這兩項都是被指定的最後一項。

:only-child

選取某個元素唯一的子代。

HTML程式碼

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

CSS程式碼

p:only-child {
    color: orange;
}

上述樣式只作用在第一個

的

元素。第二個

裡面因為不只

元素，還有元素，所以第二個

的

元素不會被上述樣式影響。

這個選擇符比較難理解。只有當指定的標籤是另一個標籤的唯一子代時，這個選擇符定義的樣式才有效。也就是說，子代中只有一個指定的標籤還不行，如果指定的標籤有其他同儕標籤，這個選擇符定義的樣式就會失效。

:nth-child

這個選擇權用法比較複雜，不過也特別有用。

這個選擇子可以輕易地為表格中相隔的行、列表中相隔兩個項目的項目或相隔其他數目的子代元素定義樣式。

這個選擇符需要一個值，用來決定選取哪些子代。

其中最簡單的值是關鍵字，即odd和even。

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中文網其它相關文章！

  推薦閱讀：
  

  CSS的定位屬性詳解

  
  

  css3如何做出小於一像素的細線## #######

  以上是CSS的子代選擇符的詳細內容。更多資訊請關注PHP中文網其他相關文章！