在网页中,如果我们需要修改同一标签中的某个标签时,需要用到序选择器。
序选择器的类型:
同级别:
first-child:对同级别中的第一个标签进行修改;
nth-child(n):对同级别中第n个标签进行修改;
last-child:对同级别中最后一个标签进行修改;
only-child:对同级别中的唯一标签进行修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
p:first-child {
color: red;
}
p:nth-child(2) {
font-family: "华文楷体";
}
p:last-child {
font-size: 30px;
}
</style>
</head>
<body>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<div>
<p>我是段落4</p>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
</div>
</body>
</html>
同类型:
first-of-type:修改同类型标签中的第一个标签;
last-of-type:修改同类型标签中的最后一个标签;
nth-of-type(n):修改同类型标签中的第n个标签;
nth-last-of-type(n):修改同类型标签中倒数第n个标签;
only-of-type:修改同类型标签中的唯一标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
p:first-of-type {
color: red;
}
p:last-of-type {
font-family: 华文楷体;
}
p:nth-of-type(2) {
font-size: 20px;
}
</style>
</head>
<body>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<div>
<p>我是段落4</p>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
</div>
</body>
</html>
nth-child(odd):修改同级别奇数标签;
nth-child(even):修改同级别偶数标签;
nth-child(xn+y):输入任意的x与y,修改任意行的标签(n从0到标签最大值);
nth-of-type(odd):修改同类型奇数标签;
nth-of-type(even):修改同类型偶数标签;
nth-of-type(xn+y):输入任意的x与y,修改任意行的标签(n从0到标签最大值);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
p:nth-child(odd) {
color: yellow;
}
p:nth-child(even) {
font-size: 30px;
}
</style>
</head>
<body>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<div>
<p>我是段落4</p>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
p:nth-child(2n+1){
color: red;
}
</style>
</head>
<body>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<div>
<p>我是段落4</p>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
<p>我是段落8</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
p:nth-of-type(odd){
color: red;
}
p:nth-of-type(even){
color: blue;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<div>
<h1>我是标题</h1>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
<style>
p:nth-of-type(2n+2){
color: red;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<div>
<h1>我是标题</h1>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<p>我是段落6</p>
<p>我是段落7</p>
</div>
</body>
</html>