CSS基本选择器与上下文选择器

效果图

代码如下

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>CSS基本选择器与上下文选择器</title>
  9. </head>
  10. <body>
  11. <style>
  12. ul li {
  13. background-color: lightblue;
  14. }
  15. nav > ul > li {
  16. background-color: lightgreen;
  17. }
  18. .start + li {
  19. background-color: #666666;
  20. }
  21. .item4 ~ li {
  22. background-color: orangered;
  23. }
  24. </style>
  25. <div class="row">
  26. <nav>
  27. <ul>
  28. <li>item1</li>
  29. <li class="start">item2</li>
  30. <li>item3</li>
  31. <li class="item4">
  32. item4
  33. <ul>
  34. <li>item4-1</li>
  35. <li>item4-2</li>
  36. <li>item4-3</li>
  37. </ul>
  38. </li>
  39. <li>item5</li>
  40. </ul>
  41. </nav>
  42. </div>
  43. </body>
  44. </html>