欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

css样式来源/选择器

程序员文章站 2022-06-01 20:29:16
...

css

样式来源

  • 默认样式
  • 行内样式 style=””
  • 文档样式 <style></style>
  • 外部样式 style.css

选择器

基本选择器

  • [属性]
  • # id
  • . class
  • * 通配符

    上下文选择器

  • > 子元素 只选择一代
  • 空格 所有后代
  • + 相邻兄弟
  • ~ 所有兄弟

css权重

  • *:!important
  • 第一等:内链style=””
  • 第二等:ID选择器 #h3
  • 第三等:类选择器 .h3
  • 第四等:空格选择器 div h3
  • 通配符:子选择器、相邻选择器等

案例

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4.     <meta charset="UTF-8">
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. 

  7.     <title>Document</title>
    8. 

  8. <!-- 第三按文件和style顺序从下往上 -->
    9. 

  9.     <link rel="stylesheet" href="css.css">
    10. 

  10. <style>
    11. 

  11. *{
    12. 

  12.     font-size:45px;
    13. 

  13.     font-weight:bolder;
    14. 

  14. }
    15. 

  15. /* 子元素 只选择一代 */
    16. 

  16. .div2>div>span{
    17. 

  17.     color:#159454;
    18. 

  18. }
    19. 

  19. /* 空格 所有后代 */
    20. 

  20. .div3>div span{
    21. 

  21.     color:#8b9415;
    22. 

  22. }
    23. 

  23. /* 相邻兄弟 */
    24. 

  24. .div4>div+ul{
    25. 

  25.     color:#849229;
    26. 

  26. }
    27. 

  27. /* 所有兄弟 ~ */
    28. 

  28. .div5>div~ul{
    29. 

  29.     color:#359229;
    30. 

  30. }
    31. 

  31. /* 
    32. 

  32. *:!important
    33. 

  33. 第一等:内链style=""
    34. 

  34. 第二等:ID选择器 #h3
    35. 

  35. 第三等:类选择器 .h3
    36. 

  36. 第四等:空格选择器 div h3
    37. 

  37. 通配符:子选择器、相邻选择器等
    38. 

  38. */
    39. 

  39. div h3.h3#h3{
    40. 

  40.     color:#123456;
    41. 

  41. }
    42. 

  42. div h3.h3{
    43. 

  43.     color:#234567;
    44. 

  44. }
    45. 

  45. div h3{
    46. 

  46.     color:#345678;
    47. 

  47. }
    48. 

  48. h3{
    49. 

  49.     color:#456789;
    50. 

  50. }
    51. 

    52. 

  52. /* 优先执行!important */
    53. 

  53. .div{
    54. 

  54.     color:#4a498f !important;
    55. 

  55. }
    56. 

  56. </style>
    57. 

  57. </head>
    58. 

  58. <body>
    59. 

  59. <div style="display: flex;" >
    60. 

  60. <div style="width:50%;" >
    61. 

  61.     <!-- 第二执行style -->
    62. 

  62.     <div class="div" style="color:red;">123</div>
    63. 

    64. 

  64.     <div class="div2" >
    65. 

  65.         <div>
    66. 

  66.             <span>11</span>
    67. 

  67.         </div>
    68. 

  68.         <div>
    69. 

  69.             <div>
    70. 

  70.                 <span>22</span>
    71. 

  71.             </div>
    72. 

  72.         </div>
    73. 

  73.     </div>
    74. 

    75. 

  75.     <div class="div3" >
    76. 

  76.         <div>
    77. 

  77.             <span>11</span>
    78. 

  78.         </div>
    79. 

  79.         <div>
    80. 

  80.             <div>
    81. 

  81.                 <span>22</span>
    82. 

  82.             </div>
    83. 

  83.         </div>
    84. 

  84.     </div>
    85. 

    86. 

  86.     <div class="div4" >
    87. 

  87.         <div>
    88. 

  88.             <span>11</span>
    89. 

  89.         </div>
    90. 

  90.         <ul>
    91. 

  91.             <li>222</li>
    92. 

  92.         </ul>
    93. 

  93.         <ul>
    94. 

  94.             <li>333</li>
    95. 

  95.         </ul>
    96. 

  96.     </div>
    97. 

    98. 

  98.     <div class="div5" >
    99. 

  99.         <div>
    100. 

  100.             <span>11</span>
    101. 

  101.         </div>
    102. 

  102.         <ul>
    103. 

  103.             <li>222</li>
    104. 

  104.         </ul>
    105. 

  105.         <ul>
    106. 

  106.             <li>333</li>
    107. 

  107.         </ul>
    108. 

  108.     </div>
    109. 

  109. </div>
    110. 

  110. <div style="width:50%;" >
    111. 

  111. <!-- 权重 -->
    112. 

  112. <h3 class="h3" id="h3" >123</h3>
    113. 

  113. </div>
    114. 

  114. </div>
    115. 

  115. </body>
    116. 

  116. </html>
    117.

上一篇： 定位登录页面/flex布局

下一篇： 如何管理Oracle的表空间和数据文件

推荐阅读