前端学习经验（7）
CSS
选择器
结构伪类选择器
结构伪类选择器：减少类选择器和id选择器的定义
child系列：
first-child：选择父级元素中的第一个子元素，必须是子元素中的第一个元素
父元素>子元素（第一个）标签:first-child{
样式表
}
如：
<head>
<style>
.a>div:first-child{
color: orange;
background: green;
width: 30px;
height: 30px;
}
.a5>span:first-child{
font-family: "楷体";
font-size: 50px;
}
</style>
</head>
<body>
<div class = "a">
<div>子元素1</div>
<h1>子元素2</h1>
<p>子元素3</p>
<span>子元素4</span>
<div class = "a5">子元素5
<span>子元素5.1</span>
<p>子元素5.2</p>
<div>子元素5.3</div>
</div>
<div>子元素6</div>
</div>
</body>
last-child：选择父级元素中的最后一个子元素，必须是子元素中的最后一个元素
父元素>子元素（最后一个）标签:last-child{
样式表
}
如：
<head>
<style>
.a>div:last-child{
color: orange;
background: green;
width: 30px;
height: 30px;
}
.a5>p:last-child{
font-family: "楷体";
font-size: 50px;
}
</style>
</head>
<body>
<div class = "a">
<div>子元素1</div>
<h1>子元素2</h1>
<p>子元素3</p>
<span>子元素4</span>
<div class = "a5">子元素5
<span>子元素5.1</span>
<div>子元素5.2</div>
<p>子元素5.3</p>
</div>
<div>子元素6</div>
</div>
</body>
only-child：选择父级元素中的唯一的一个子元素，必须是子元素中的唯一的一个元素,用于场景判断
父元素>子元素（唯一一个）标签:only-child{
样式表
}
如：
<head>
<style>
.a>div:only-child{
color: orange;
background: green;
width: 30px;
height: 30px;
}
</style>
</head>
<body>
<div class = "a">
<div>唯一的子元素</div>
</div>
</body>
nth-child(n)：选择父级元素的第n个子元素。(正着找符合条件的子元素)，n：可以使用数字，函数，英文等。
数字：0，1，2，3，…
公式：如 2n+1，3n+1，…
英文：odd(奇数)，even(偶数)
父元素>子元素（指定第几个）标签:nth-child(n){
样式表
}
如：
<head>
<style>
.a>li:nth-child(2n+1){
font-family: "宋体";
font-size: 50px;
background: green;
}
.a>li:nth-child(1){
font-family: "黑体";
font-size: 100px;
background: red;
}
.a>li:nth-child(even){
font-family: "楷体";
font-size: 50px;
background: orange;
}
</style>
</head>
<body>
<ul class="a">
<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>
</ul>
</body>
nth-last-child(n)：选择父级元素的倒数第n个子元素。(倒着找符合条件的子元素)，n：可以使用数字，函数，英文等。
数字：0，1，2，3，…
公式：如 2n+1，3n+1，…
英文：odd(奇数)，even(偶数)
父元素>子元素（指定倒数第几个）标签:nth-last-child(n){
样式表
}
如：
<head>
<style>
.a>li:nth-last-child(2n+1){
font-family: "宋体";
font-size: 50px;
background: green;
}
.a>li:nth-last-child(1){
font-family: "黑体";
font-size: 100px;
background: red;
}
.a>li:nth-last-child(even){
font-family: "楷体";
font-size: 50px;
background: orange;
}
</style>
</head>
<body>
<ul class="a">
<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>
</ul>
</body>
来源：CSDN
作者：黯黯°
链接：https://blog.csdn.net/weixin_44272970/article/details/103669471