<commit_before>---
layout: post
title:  "CSS3 伪类选择器之数量选定"
date:   2015-12-20 12:41:17 +0800
categories: css3,selector
---

### CSS3 计数规则

1. CSS选择元素从 1 开始计数
2. 伪类选择器 :nth-child(n) 参数 n 从 0 开始计数

### child vs type
伪类选择器 child 和 type 两个版本，本文的例子只针对 child 版本，下面给出完整对照表

child 选择器    |    | type 选择器
-------------- | -- | ----------------
first-child    | -> | first-of-type
last-child     | -> | last-of-type
nth-child      | -> | nth-of-type
nth-last-child | -> | nth-last-of-type
only-child     | -> | only-of-type

不打算配图了，诸看客自行脑补

{% highlight css linenos %}
/* 第1项 - 不推荐用 :nth-child(1)，语义不明确 */
span:first-child {
    color: navy;
}

/* 最后1项 */
span:last-child {
    color: olive;
}

/* 唯一孩子节点 */
span:only-child {
    color: black;
}

/* 正数第x项 */
span:nth-child(5) {
    color: navy;
}

/* 倒数第x项 */<commit_msg>change code style<commit_after>---
layout: post
title:  "CSS3 伪类选择器之数量选定"
date:   2015-12-20 12:41:17 +0800
categories: css3,selector
---

### CSS3 计数规则

1. CSS 选择元素从 1 开始计数。
2. 伪类选择器 `:nth-child(n)` 参数 n 从 0 开始计数。

### child vs type

伪类选择器 `child` 和 `type` 两个版本，
本文的例子只针对 `child` 版本，下面给出完整对照表。

child 选择器    |    | type 选择器
-------------- | -- | ----------------
`first-child`    | -> | `first-of-type`
`last-child`     | -> | `last-of-type`
`nth-child`      | -> | `nth-of-type`
`nth-last-child` | -> | `nth-last-of-type`
`only-child`     | -> | `only-of-type`

### 实例代码

不打算配图了，诸看客自行脑补。

{% highlight css linenos %}
/* 第1项 - 不推荐用 :nth-child(1)，语义不明确 */
span:first-child {
    color: navy;
}

/* 最后1项 */
span:last-child {
    color: olive;
}

/* 唯一孩子节点 */
span:only-child {
    color: black;
}

/* 正数第x项 */
span:nth-child(5) {
    color: navy;
}

/* 倒数第x项 */
{'fraction_non_alphanumeric': 0.21843207660083783, 'fraction_numerical': 0.034709754637941355, 'mean_word_length': 2.2848722986247543, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7052979', 'n_tokens_mistral': 902, 'n_tokens_neox': 947, 'n_words': 151}