css+css3之结构伪类选择器
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
li:first-child { /* 选择第一个孩子 */
color: pink;
}
li:last-child { /* 最后一个孩子 */
color: purple;
}
li:nth-child(4) { /* 选择第4个孩子 n 代表 第几个的意思 */
color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>第一个孩子</li>
<li>第二个孩子</li>
<li>第三个孩子</li>
<li>第四个孩子</li>
<li>第五个孩子</li>
<li>第六个孩子</li>
<li>第七个孩子</li>
</ul>
</body>
</html>
效果如下
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
/* li:nth-child(odd) { 可以选择所有的 odd奇数 的孩子标签
color: pink;
}
li:nth-child(even) { 可以选择所有的 even 偶数 的孩子标签
color: deeppink;
} */
li:nth-child(3n) { /* n 0 2n 2n是 选择 0 2.4.6.8..的孩子 3n 0.3.6.9的孩子元素 */
color: pink;
}
</style>
</head>
<body>
<ul>
<li>第一个孩子</li>
<li>第二个孩子</li>
<li>第三个孩子</li>
<li>第四个孩子</li>
<li>第五个孩子</li>
<li>第六个孩子</li>
<li>第七个孩子</li>
</ul>
</body>
</html>
效果如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
/* li:nth-child(even) { 从第一个孩子开始数的
color: pink;
} */
li:nth-last-child(even) { /* nth-last-child 从最后一个孩子开始数 倒数 */
color: skyblue;
}
</style>
</head>
<body>
<ul>
<li>第一个孩子</li>
<li>第二个孩子</li>
<li>第三个孩子</li>
<li>第四个孩子</li>
<li>第五个孩子</li>
<li>第六个孩子</li>
<li>第七个孩子</li>
<li>第八个孩子</li>
</ul>
</body>
</html>
效果如下: