序选择器 - 爱码网

在网页中，如果我们需要修改同一标签中的某个标签时，需要用到序选择器。

序选择器的类型：

同级别：

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>

序选择器