:last-child理解

:last-child理解

关于:last-child不是很理解。课程里讲的想要让body里的div变红色,需要放在body的最后面,可是我在body的最后面写了一个div,还是没有效果。希望老师能再次完整的总结一下:last-child的用法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style type="text/css">
 div:last-child {
      color: red;
 }
  </style>
</head>
<body>
<div>0-1</div>
<div>0-2</div>
<div>0-3</div>
<section>
  <div>1-1</div>
  <div>1-2</div>
  <div>1-3</div>
</section>
<section>
  <div>2-1</div>
  <div>2-2</div>
  <div>2-3</div>
</section>
<div>3-1</div>
</body>
</html>

http://img1.sycdn.imooc.com/climg//59a3ddd400017c2000730226.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
好帮手慕糖 2017-08-29 12:04:17

你好,webstorm在浏览器中预览HTML文件,是通过webstorm的静态服务器来运行的,地址一般为:localhost:xxxx/开头。 webstorm 的静态服务器损坏(或者没有启动)会造成一定的影响,课程中老师使用的都是sublime,建议你使用sublime编译器。祝学习愉快~

好帮手慕糖 2017-08-28 18:25:41

你好,:last-child 选择器匹配属于其父元素的最后一个子元素的每个元素。

这里最后一个元素是可以改变颜色的呀,如下图;

http://img1.sycdn.imooc.com/climg//59a3ef6200014baf01750248.jpg

祝学习愉快~

  • 提问者 君子乐道 #1
    在webstorm里,使用浏览器打开没有效果,但是直接从文件夹里使用浏览器打开就行了。
    2017-08-29 11:56:56
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5与CSS3实现动态网页 2018
  • 参与学习       1887    人
  • 提交作业       4643    份
  • 解答问题       5760    个

有HTML和CSS基础,却不知道如何进阶?本路径带你通过系统学习,完成从“会做网页”到“做出好的动态网页”的蜕变,迈出成为前端工程师的第一步。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师