8_多选择器.html 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. <style>
  8. /* .c{
  9. color: red;
  10. } */
  11. /* .a .b .c{
  12. color: red;
  13. } */
  14. /* id选择器(百位) > 类选择器(十位) > 标签选择器(个位) */
  15. /* 0-0-0 */
  16. /* 0-2-0 */
  17. .a .c{
  18. color: red;
  19. }
  20. /* 0-1-0 */
  21. .c{
  22. color: blue;
  23. }
  24. /* 1-0-0 */
  25. #id1{
  26. color: purple;
  27. }
  28. /* 0-0-1 */
  29. div{
  30. color: yellow;
  31. }
  32. /* 1-1-0 */
  33. .a #div2{
  34. color: aqua;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <div class="a">
  40. hello
  41. <div class="b">
  42. world
  43. <div class="c" id="div2">
  44. 你好
  45. </div>
  46. </div>
  47. </div>
  48. <div class="c" id="id1">世界</div>
  49. </body>
  50. </html>