Open lishengzxc opened 8 years ago
元素。
OK,基础的东西就描述到这里,本身大家应该都了解,接下来说一些进阶的应用。
申明下面所有例子有应用于以下结构:
<ul> <li>...<li> ... </ul>
ul li:nth-child(-n + 3) { ... }
ul li:nth-last-child(-n + 3) { ... }
ul li:nth-child(n + 4) { ... }
ul li:nth-child(n + 2):nth-child(-n + 4) { ... }
ul li:nth-child(n + 3):nth-last-child(n + 3) { ... }
ul li:nth-child(odd):nth-child(n + 2):nth-child(-n + 4) { ... }
or
ul li:nth-child(even):nth-child(n + 2):nth-child(-n + 4) { ... }
ul li:nth-child(3n):nth-child(n + 2):nth-child(-n + 4) { ... }
ul li:not(:nth-child(3)) { ... }
ul li:nth-last-child(2):first-child { ... }
ul li:nth-last-child(n + 3), ul li:nth-last-child(n + 3) ~ li { ... }
ul li:nth-last-child(-n + 3):first-child, ul li:nth-last-child(-n + 3):first-child ~ li { ... }
ul li:nth-last-child(n + 5):nth-last-child(-n + 10):first-child, ul li:nth-last-child(n + 5):nth-last-child(-n + 10):first-child ~ li { ... }
diaodiao 的 CSS child 选择器
基础的概念和应用
元素。
元素。
元素。
元素。
OK,基础的东西就描述到这里,本身大家应该都了解,接下来说一些进阶的应用。
进阶应用
申明下面所有例子有应用于以下结构:
选择前 3 个 li
选择后 3 个 li
选择从第 3 个开始的以后的 li
选择从第 2 个到第 4 个 li
选择前后从第 3 个开始的全部
选择从第 2 个到 第 4 个中的奇(偶)数个 li
or
选择从第 2 个到 第 4 个中的 3 倍数个 li
选择除了第 3 个的全部 li
选择只有 2 个 li 的第 1 个
选择 li 最少满足 3 个的情况
选择 li 最多满足 3 个的情况
选择 li 满足最少 5 个最多 10 个的情况
参考链接