<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nth-child(n)</title>
<style>
/* n 可以是关键词。将所有下标为偶数的标签选出来 */
/* ul li:nth-child(even) {
background-color: #fff;
} */
/* n 可以是关键词。将所有下标为奇数的标签选出来 */
/*
ul li:nth-child(odd) {
background-color: rgba(138, 132, 132, 0.924);
} */
/* 如果n为公式,n从0开始计算 */
/* ul li:nth-child(-n+5) {
background-color: pink;
} */
div :nth-child(2) {
background-color: hotpink;
}
/* 以下格式没有结果:因为下图表示即是span标签又是第一个标签。由结构可知
第一个标签是p标签,因此矛盾。 */
/* <!-- nth-child(n)在选择n时只专注于选择第几个元素标签,并不区分是否是同类型 --> */
div span:nth-child(1) {
background-color: skyblue;
}
/* div :nth-child(2) {
background-color: blue;
} */
/* 上下这里欧昂中表示都可以将span表签的第二个选出来 */
/* div span:nth-child(2) {
background-color: green;
} */
/* 根据类型选择元素of-type */
/* 选择span类型的第一个元素 */
div span:first-of-type {
background-color: yellow;
}
/* 选择span类型的最后一个元素 */
div span:last-of-type {
background-color: rgb(63, 61, 206);
}
/* 选择指定类型的元素nth-of-type(n),此处的n与nth-child(n)相同 */
div span:nth-of-type(2) {
background-color: lightblue;
}
</style>
</head>
<body>
<!-- 由于ul里面只允许放li 标签,所以nth-child(n)和 nth-of-type(n)效果相同 -->
<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>10</li>
</ul>
<!-- nth-child(n)在选择n时只专注于选择第几个元素标签,并不区分是否是同类型 -->
<div>
<p>1</p>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
</body>
</html>
<!-- nth-child(n):
1.n可以是数字,关键字和公式
2.n如果是数字,表示就是选择第几个
3.常见的关键字;even(偶数)odd(奇数)
4.n如果是公式,则从0 开始计算,但是第0个元素或者
超出了元素个数会被忽略
常见公式:
2n 偶数
2n+1 奇数
5n
n+5 从第5 个开始(包含地5个)到最后
-n+5 前5个(包含第5个)
tips:
nth-child(n)选择父元素里面的第n个孩子,它不管里面孩子是否属于同一类型
->
H5中nth-child(n)详解
最新推荐文章于 2024-05-20 21:21:56 发布