老师,这里div这个怎么理解,为什么明明是nth-child(3)确实第二个变了呢

来源:2-23 结构类——First-Child和LastChild和nth-Child

a松

2020-04-04 16:54:53

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        ul > li:nth-child(4){background: blue;}

        div:nth-child(3){color:red;}

    </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>

    </ul>

   

    <div>10</div>

    <div>20</div>

    <div>30</div>

    <section>

        <div>1-1</div>

        <div>1-2</div>

        <div>1-3</div>

    </section>

    <section>

        <div>2-1</div>

        <div>2-1</div>

        <div>2-3</div>

    </section>

</body>

</html>


写回答

1回答

好帮手慕慕子

2020-04-04

同学你好,:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。

如下所示内容是20的div元素,是body下第三个子元素,所以会被选择,颜色改变为红色。

http://img.mukewang.com/climg/5e884eeb097cb8c515020796.jpg

同学可以试着理解下,祝学习愉快~

0

0 学习 · 40143 问题

查看课程