CSS3 - 结构伪类选择器
2019-03-14 本文已影响0人
Hyso
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<span>文字1</span>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
</div>
<div>
<p>段落5</p>
<p>段落6</p>
<p>段落7</p>
<p>段落8</p>
<span>文字2</span>
</div>
</body>
</html>
选中第一个 p 标签，且此 p 标签为第一个子元素
<style type="text/css">
p:first-child{
color: red;
}
</style>
显示结果：
选中最后一个 p 标签，且此 p 标签为最后一个子元素
<style type="text/css">
p:last-child{
color: red;
}
</style>
显示结果：
选中第 N 个 p 标签，且此 p 标签为第 N 个子元素（第1个为 N=1）
- N >= 0
- N可以设置为预定义的值：odd（选中奇数）、even（选中偶数）
- N可以是表达式，格式：an+b。如：2n+1，n会依次取0,1,2,3,4....，直至表达式的结果值超过最大的子元素（某元素下有7个子元素，则满足 n 的值为 0,1,2,3，因为当 n 为4时，2n+1=9，已超过子元素个数）
- 示例：选中第3个 p 标签，且此 p 标签为第3个子元素
<style type="text/css">
p:nth-child(3){
color: red;
}
</style>
显示结果：
选中倒数第 N 个 p 标签，且此 p 标签为倒数第 N 个子元素（倒数第1个为 N=1）
- N >= 0
- N可以设置为预定义的值：odd（选中奇数）、even（选中偶数）
- N可以是表达式，格式：an+b。如：2n+1，n会依次取0,1,2,3,4....，直至表达式的结果值超过最大的子元素（某元素下有7个子元素，则满足 n 的值为 0,1,2,3，因为当 n 为4时，2n+1=9，已超过子元素个数）
- 示例：选中倒数第1个 p 标签，且此 p 标签为倒数第1个子元素
<style type="text/css">
p:nth-last-child(1){
color: red;
}
</style>
显示结果：
