8-6 捡了一个儿子 - 子选择器
本节编程练习不计算学习进度,请电脑登录imooc.com操作

捡了一个儿子 - 子选择器

还有一个比较有用的选择器子选择器,即大于符号(>),用于选择指定标签元素的第一代子元素如右侧代码编辑器中的代码:

.food>li{border:1px solid red;}

这行代码会使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。

任务

我也来试试,把文字内容的“我还是一个胆小如鼠的小女孩”这一句话加入红色边框。效果图如下:

 

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>子选择器</title>
  7. <style type="text/css">
  8. /*添加边框样式(粗细为1px, 颜色为红色的实线)*/
  9.  
  10. .food>li {
  11. border: 1px solid red;
  12. }
  13.  
  14. </style>
  15. </head>
  16.  
  17. <body>
  18. <p class="first">三年级时,<span>我还是一个<span>胆小如鼠</span>的小女孩</span>,上课从来不敢回答老师提出的问题,生怕回答错了老师会批评我。就一直没有这个勇气来回答老师提出的问题。学校举办的活动我也没勇气参加。</p>
  19. <h1>食物</h1>
  20. <ul class="food">
  21. <li>水果
  22. <ul>
  23. <li>香蕉</li>
  24. <li>苹果</li>
  25. <li></li>
  26. </ul>
  27. </li>
  28. <li>蔬菜
  29. <ul>
  30. <li>白菜</li>
  31. <li>油菜</li>
  32. <li>卷心菜</li>
  33. </ul>
  34. </li>
  35. </ul>
  36. </body>
  37.  
  38. </html>
下一节