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

css样式来源、基本选择器、上下文选择器、选择器的权重

程序员文章站 2022-03-24 09:07:10
...

样式来源

主页面

    

  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.     <!-- 外部样式  -->
    8. 

  8.     <link rel="stylesheet" href="css/style.css" />
    9. 

  9.     <title>Document</title>
    10. 

  10.   </head>
    11. 

  11.   <body>
    12. 

  12.     <!-- 浏览器默认样式 -->
    13. 

  13.     <h1>样式来源1</h1>
    14. 

  14.     <!-- 内联样式 -->
    15. 

  15.     <h1 style="color: red">样式来源2</h1>
    16. 

  16.     <h2>样式来源3</h2>
    17. 

  17.     <h3>样式来源4</h3>
    18. 

    19. 

  19.     <!-- 文档样式 -->
    20. 

  20.     <style>
    21. 

  21.       h2 {
    22. 

  22.         /* 写在后面的会覆盖前面的  */
    23. 

  23.         color: royalblue;
    24. 

  24.         color: salmon;
    25. 

  25.       }
    26. 

  26.     </style>
    27. 

  27.   </body>
    28. 

  28. </html>
    29.

style.css文件

    

  1. h3 {
    2. 

  2.   color: blueviolet;
    3. 

  3. }
    4.

样式来源优先级

内联样式>文档样式>外部样式

图示：
css样式来源、基本选择器、上下文选择器、选择器的权重

基本选择器

    

  1.     <table border="1" width="400" height="100" align="center">
    2. 

  2.       <caption>
    3. 

  3.         产品列表
    4. 

  4.       </caption>
    5. 

  5.       <thead>
    6. 

  6.         <tr>
    7. 

  7.           <th>名称</th>
    8. 

  8.           <th>价格</th>
    9. 

  9.           <th>数量</th>
    10. 

  10.           <th price="sum">总金额</th>
    11. 

  11.         </tr>
    12. 

  12.       </thead>
    13. 

  13.       <tboday>
    14. 

  14.         <tr>
    15. 

  15.           <td id="zhuji">主机</td>
    16. 

  16.           <td>5000</td>
    17. 

  17.           <td>1</td>
    18. 

  18.           <td>5000</td>
    19. 

  19.         </tr>
    20. 

  20.         <tr>
    21. 

  21.           <td class="s">鼠标</td>
    22. 

  22.           <td class="s">200</td>
    23. 

  23.           <td class="s">1</td>
    24. 

  24.           <td class="s">200</td>
    25. 

  25.         </tr>
    26. 

  26.         <tr>
    27. 

  27.           <td>键盘</td>
    28. 

  28.           <td>300</td>
    29. 

  29.           <td>1</td>
    30. 

  30.           <td>300</td>
    31. 

  31.         </tr>
    32. 

  32.         <tr>
    33. 

  33.           <td>显示器</td>
    34. 

  34.           <td>2000</td>
    35. 

  35.           <td>1</td>
    36. 

  36.           <td>2000</td>
    37. 

  37.         </tr>
    38. 

  38.       </tboday>
    39. 

  39.       <tfoot>
    40. 

  40.         <tr>
    41. 

  41.           <td colspan="4">电脑总价：7500</td>
    42. 

  42.           <!-- <td>x</td>
    43. 

  43.           <td>x</td>
    44. 

  44.           <td>x</td> -->
    45. 

  45.         </tr>
    46. 

  46.       </tfoot>
    47. 

  47.     </table>
    48. 

    49. 

  49.     <style>
    50. 

  50.       /* 标签选择器 */
    51. 

  51.       table {
    52. 

  52.         text-align: center;
    53. 

  53.       }
    54. 

  54.       caption {
    55. 

  55.         font-weight: bold;
    56. 

  56.         color: red;
    57. 

  57.         font-size: larger;
    58. 

  58.       }
    59. 

  59.       th {
    60. 

  60.         background-color: skyblue;
    61. 

  61.       }
    62. 

  62.       /* 属性选择器 */
    63. 

  63.       th[price="sum"] {
    64. 

  64.         color: red;
    65. 

  65.       }
    66. 

  66.       /* id选择器 */
    67. 

  67.       td#zhuji {
    68. 

  68.         color: saddlebrown;
    69. 

  69.         font-size: larger;
    70. 

  70.         font-weight: bold;
    71. 

  71.       }
    72. 

  72.       /* 类 选择器 */
    73. 

  73.       td.s {
    74. 

  74.         background-color: salmon;
    75. 

  75.       }
    76. 

    77. 

  77.       tr>
    78. 

  78.     </style>
    79.

图示：
css样式来源、基本选择器、上下文选择器、选择器的权重

上下文选择器

    

    2. 

  2. <ol class="list">
    3. 

  3.       <li class="item">item1</li>
    4. 

  4.       <li class="item second">item2</li>
    5. 

  5.       <ul class="ulist">
    6. 

  6.         <li class="uitem">uitem1</li>
    7. 

  7.         <li class="uitem second">uitem2</li>
    8. 

  8.         <li class="uitem">uitem3</li>
    9. 

  9.         <li class="uitem">uitem4</li>
    10. 

  10.       </ul>
    11. 

  11.       <li class="item">item3</li>
    12. 

  12.       <li class="item fourth">item4</li>
    13. 

  13.       <li class="item">item5</li>
    14. 

  14.       <li class="item">item6</li>
    15. 

  15.     </ol>
    16. 

    17. 

  17.     <style>
    18. 

  18.       /* 子元素 > */
    19. 

  19.       .list > li {
    20. 

  20.         background-color: bisque;
    21. 

  21.       }
    22. 

  22.       /* 后代元素 空格 */
    23. 

  23.       .list li {
    24. 

  24.         border: 1px solid;
    25. 

  25.       }
    26. 

  26.       /* 相邻后面的兄弟 + *   */
    27. 

  27.       .item.fourth + * {
    28. 

  28.         font-size: larger;
    29. 

  29.       }
    30. 

    31. 

  31.       /* 后面所有的兄弟 ~ *  */
    32. 

  32.       .item.fourth ~ * {
    33. 

  33.         color: red;
    34. 

  34.       }
    35. 

  35.     </style>
    36.

图示：
css样式来源、基本选择器、上下文选择器、选择器的权重

选择器的权重

    

  1. <div class="test">
    2. 

  2.       <p class="te" id="xz">选择器的权重</p>
    3. 

  3.     </div>
    4. 

    5. 

  5.     <style>
    6. 

  6.       /* 就想放在前面,又想让它生效,只有提权 */
    7. 

  7.       p.te#xz {
    8. 

  8.         color: yellowgreen;
    9. 

  9.       }
    10. 

  10.       .te#xz {
    11. 

  11.         color: violet;
    12. 

  12.       }
    13. 

  13.       #xz {
    14. 

  14.         color: saddlebrown;
    15. 

  15.       }
    16. 

    17. 

  17.       p.te {
    18. 

  18.         color: steelblue;
    19. 

  19.       }
    20. 

  20.       .te {
    21. 

  21.         color: red;
    22. 

  22.       }
    23. 

  23.       p {
    24. 

  24.         color: rosybrown;
    25. 

  25.         font-weight: bold;
    26. 

  26.       }
    27. 

    28. 

  28.       /*  0,0,0
    29. 

  29.       css 将 id, class, tag 看成一个"三位整数", id -> 百位, class -> 十位, tag -> 个位 
    30. 

  30.       三个权重的位置, 从左到右    
    31. 

  31.       第1位: id数量 
    32. 

  32.       第2位: class数量
    33. 

  33.       第3位: 标签数量
    34. 

  34.       */
    35. 

  35.     </style>
    36.

上一篇： 用PDO扩展连接mysql数据库 实现用户登录时防sql注入的处理

下一篇： 【前端】在苹果safari浏览器上video标签无法正常播放视频

推荐阅读