这篇博客详细介绍了CSS中的层级选择器，包括:first-child, :last-child, :nth-child(n), :nth-last-child(n), :first-of-type, :last-of-type, :nth-of-type(n)和:nth-last-of-type(n)等，以及 nth 中 n 的各种用法，如数字、odd、even、n+8和-n+3等，并提供了代码展示和实际效果的呈现。"
117967254,5589275,DevOps 工具盘点：30 款最佳工具和技术解析,"['DevOps', 'Jenkins', '自动化测试', '配置管理', '监控']
文章目录
刚开始学习前端，每天写一两个小模块
css层级选择器理论{#ek)
- E:first-child : 匹配的是E元素，E元素是父元素的第一个子元素
说明：利用 :first-child 这个伪类，只有当元素是另一个元素的第一个子元素时才能匹配。例如，p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素。一般可能认为这会选择作为段落第一个子元素的元素，但事实上并非如此，如果要选择段落的第一个子元素，应当写为 p > *:first-child。 - E:last-child : 匹配的是E元素，E元素是父元素的最后一个子元素
- E:nth-child(n): 匹配的是E元素，且E元素是父元素的正数第n个子元素
- E:nth-last-child(n): 匹配的是E元素，且E元素是父元素的倒数第n个子元素
- E:first-of-type: 匹配E元素，在所有的E元素中选择第一个子元素为E的元素
- E:last-of-type: 匹配E元素，在所有的E元素中选择倒数第一个子元素为E的元素
- E:nth-of-type(n): 匹配E元素，在所有的E元素中选择正数第n个子元素为E的元素
- E:nth-last-of-type(n): 匹配E元素，在所有的E元素中选择倒数第n个子元素为E的元素
nth中n的用法
- 数字
- odd： 奇数
- even: 偶数
- n+8: 8以后的
- -n+3: 前3个
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>层级选择器</title>
<style>
ul
最低0.47元/天 解锁文章
998
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
