为什么最后面的数字3是蓝色的，不应该是红色吗？
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div:first-child{color:#00ffff;} /*其父元素的的第一个子元素为DIV时发生颜色变化*/
div:last-child{color:#f00;} /*其父元素的的最后一个子元素为DIV时发生颜色变化*/
</style>
</head>
<body>
<!--first-child-->
<div>99</div>
<section>
<span>-1</span>
<div>0</div>
<div>1</div>
<div>2</div>
</section>
<section>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
<!--last-child-->
<div>99
<section>
<span>-1</span>
<div>0</div>
<div>1</div>
<div>2</div>
</section>
<section>
<div>3</div>
<div>4</div>
<div>5</div>
</section>
</div>
</body>
</html>
正在回答
同学你好，问题解答如下：
div:last-child可以选中body中最后一个div，该div是3所在的div的父元素，所以红色对于3所在的div来说是继承样式，而div:first-child可以直接选中3所在的div，所以对于3所在的div来讲，该样式的优先级更高，因此样式以div:first-child为准，如下：
另外，单纯对“3”而言，两个样式，都是作用在它的父元素上，权重相同（继承样式），但是3直接父元素的样式离“3”更近，因此也会以first的样式为准（离得近，不是指代码的书写位置，而是指结构上更近）。
祝学习愉快！
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星