老师,这里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下第三个子元素,所以会被选择,颜色改变为红色。
同学可以试着理解下,祝学习愉快~
相似问题