E:nth-child 与 E:nth-of-type 的区别
E:nth-child(所有的儿子都是儿子,标签名可以不一样)
E:nth-of-type(不是所有的儿子都是儿子,只有标签名一样的才是)
选择符 | 简介 |
---|---|
E:first-child | 匹配父元素中的第一个子元素E |
E:last-child | 匹配父元素中的最后一个子元素E |
E:nth-child(n) | 匹配父元素中的第n个子元素E |
E:first-of-type | 指定类型E的第一个 |
E:last-of-type | 指定类型E的最后一个 |
E:nth-of-type(n) | 指定类型E的第n个 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>结构伪类选择器用法</title>
<style>
ul li {
list-style-type: none
}
/*选择ul下第一个孩子*/
ul li:first-child {
background-color: pink;
}
/*选择ul下最后一个孩子*/
ul li:last-child {
background-color: pink;
}
/*选择ul下奇数孩子*/
ul li:nth-child(odd) {
background-color: pink;
}
/*选择ul下偶数孩子*/
ul li:nth-child(even) {
background-color: pink;
}
/*选择ul下全部孩子(从0开始)*/
ul li:nth-child(n) {
background-color: pink;
}
/*选择ul下偶数孩子*/
ul li:nth-child(2n) {
background-color: pink;
}
/*选择ul下奇数孩子*/
ul li:nth-child(2n+1) {
background-color: pink;
}
/*选择ul下5的倍数孩子*/
ul li:nth-child(5n) {
background-color: pink;
}
/*选择ul下第五个到最后的孩子*/
ul li:nth-child(n+5) {
background-color: pink;
}
/*选择ul下前五个(包含第五个)孩子*/
ul li:nth-child(-n+5) {
background-color: pink;
}
</style>
</head>
<body>
<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>
</body>
</html>