2_选择器.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>Document</title>
  8. <style>
  9. /* 选择器:*/
  10. /* 标签选择器 */
  11. /* div{
  12. background: #f00;
  13. } */
  14. /* id选择器 一个页面中id是唯一的 一般用于单个样式设置*/
  15. /* #div1{
  16. background: blue;
  17. } */
  18. /* class 类选择器 一般用于多个元素样式相同*/
  19. /* .list{
  20. background: pink;
  21. } */
  22. /* ul1中class名为list的元素 变 */
  23. /* 后代选择器 */
  24. #ul1 .list{
  25. background: gray;
  26. }
  27. /* id为div1 的元素 和所有class名为list的元素 都一样 */
  28. /* #div1{
  29. background: orange;
  30. }
  31. .list{
  32. background: orange;
  33. } */
  34. /* 群组选择器 |分组选择器 */
  35. #div1,.list{
  36. background: orange;
  37. }
  38. /* 伪类选择器 */
  39. a:hover{
  40. background: red;
  41. }
  42. </style>
  43. </head>
  44. <body>
  45. <!-- id属性值是唯一的 -->
  46. <div id="div1">111</div>
  47. <div>222</div>
  48. <ul id="ul1">
  49. <li>1111</li>
  50. <li class="list">1111</li>
  51. <li>1111</li>
  52. <li class="list">1111</li>
  53. </ul>
  54. <ul>
  55. <li>1111</li>
  56. <li class="list">1111</li>
  57. <li>1111</li>
  58. <li class="list">1111</li>
  59. </ul>
  60. <a id="btn" href="#">百度</a>
  61. </body>
  62. </html>