博客列表 >前端选择器作业

前端选择器作业

PHP中文网用户-6406556
PHP中文网用户-6406556原创
2023年03月15日 14:44:10257浏览

视音频元素

  1. <audio src="" controls></audio>
  2. <div><video src="Godzilla 2 Trailer.mp4" width="600" controls poster="121.jpg"></video></div>


上下文选择器

  1. <style>
  2. .list {
  3. width: 360px;
  4. }
  5. /* 父子选择器 */
  6. .list > .item {
  7. border: dotted blueviolet;
  8. }
  9. /* 后代选择器 */
  10. .list .item {
  11. color: aqua;
  12. }
  13. /* 兄弟选择器 */
  14. .four + .item {
  15. color: yellowgreen;
  16. }
  17. /* 同级选择器 */
  18. .three ~ * {
  19. background-color: royalblue;
  20. }
  21. </style>
  22. <ul class="list">
  23. <li class="item">item10</li>
  24. <li class="item">item9</li>
  25. <li class="item">item8</li>
  26. <li class="item">
  27. item7
  28. <ul>
  29. <li class="item four">item4-4</li>
  30. <li class="item three">item4-3</li>
  31. <li class="item">item4-2</li>
  32. <li class="item">item4-1</li>
  33. </ul>
  34. </li>
  35. <li class="item">item6</li>
  36. <li class="item">item5</li>
  37. </ul>

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议