search

博客列表 >元素的样式来源 基本选择器/上下文选择器 选择器的权重

元素的样式来源 基本选择器/上下文选择器 选择器的权重

蓝魔
蓝魔原创
2021年12月23日 23:29:33374浏览

一、元素的样式来源

  • 用户代理样式

    浏览器内置

  • 自定义样式

    • 内联样式
      1. <h1 style="color: red;">php.cn</h1>
    • 文档样式
      1. <style>
      2.          h1 { color: yellow;}
      3. </style>
      4. <body>
      5.          <h1>php.cn</h1>
      6. </body>
    • 外部样式
      1. <head>
      2.        <link rel="stylesheet" href="css/style.css">
      3. </head>
      4. <body>
      5.        <h1 style="color: red;">php.cn</h1>
      6. </body>

二、选择器

  • 基本选择器

    • 标签选择器
      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.   h2 {
      11.     color: red;
      12.     font-weight: bold;
      13.   }
      14. </style>
      15. </head>
      16. <body>
      17. <h2>PHP中文网</h2>
      18. </body>
      19. </html>
    • 属性选择器
      • 通过class
        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. .title {
        11.   color: #f60;
        12.   font-weight: bold;
        13. }
        14. </style>
        15. </head>
        16. <body>
        17. <h2 class="title">PHP中文网</h2>
        18. </body>
        19. </html>
      • 通过ID
        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. /* ID选择器 */
        10. #title {
        11.   color: green;
        12.   font-weight: bold;
        13. }
        14. </style>
        15. </head>
        16. <body>
        17. <h2 id="title">PHP中文网</h2>
        18. </body>
        19. </html>
      • 通过[ ]
        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. h2[dat="GuanFang"] {
        11.   color: rgb(6, 115, 204);
        12.   font-weight: bold;
        13. }
        14. </style>
        15. </head>
        16. <body>
        17. <h2 dat="GuanFang">PHP中文网</h2>
        18. <h2>第十八期</h2>
        19. </body>
        20. </html>
    • 群组选择器（ , ）
      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.   .title,
      11.   #qishu {
      12.     color: rgb(204, 6, 138);
      13.     font-weight: bold;
      14.   }
      15. </style>
      16. </head>
      17. <body>
      18. <h2 class="title">PHP中文网</h2>
      19. <h1 id="qishu">第十八期</h1>
      20. </body>
      21. </html>
    • 通配符选择器（ * ）
      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.     color: rgb(92, 6, 204);
      12.     font-weight: bold;
      13.   }
      14. </style>
      15. </head>
      16. <body>
      17. <h2 class="title">PHP中文网</h2>
      18. <h1 id="qishu">第十八期</h1>
      19. </body>
      20. </html>

  • 上下文选择器

    • 子元素（ > ）

      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.   div > span {
      11.       background-color: red;
      12.       color: #fff;
      13.       padding: 10px;
      14.   }
      15. </style>
      16. </head>
      17. <body>
      18.   <h2>PHP中文网</h2>
      19.   <h1>第十八期</h1>
      20.   <div>
      21.       <p>item1</p>
      22.       <p>item2</p>
      23.       <p>item3</p>
      24.       <span>php.cn</span>
      25.   </div>
      26.   <p>我是一个段落标签</p>
      27.   <a href="#">我是一个链接标签</a>
      28. </body>
      29. </html>

    • 后代选择器（ 空格 ）

  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.       div span {
  11.           background-color: red;
  12.           color: #fff;
  13.           padding: 10px;
  14.       }
  15.     </style>
  16.   </head>
  17.   <body>
  18.       <h2>PHP中文网</h2>
  19.       <h1>第十八期</h1>
  20.       <div>
  21.           <p>
  22.               <span>item0</span>
  23.           </p>
  24.           <p>item2</p>
  25.           <p>item3</p>
  26.           <span>php.cn</span>
  27.       </div>
  28.       <p>我是一个段落标签</p>
  29.       <a href="#">我是一个链接标签</a>
  30.   </body>
  31. </html>

    • 相邻兄弟选择器（ + ） 只能往下选1个

  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.       h2 + h1 {
  11.           background-color: red;
  12.           color: #fff;
  13.           padding: 10px;
  14.       }
  15.     </style>
  16.   </head>
  17.   <body>
  18.     <h2>PHP中文网</h2>
  19.     <h1>第十八期</h1>
  20.     <div>
  21.         <p>
  22.             <span>item0</span>
  23.         </p>
  24.         <p>item2</p>
  25.         <p>item3</p>
  26.         <span>php.cn</span>
  27.     </div>
  28.     <p>我是一个段落标签</p>
  29.     <a href="#">我是一个链接标签</a>
  30.   </body>
  31. </html>

    • 所有兄弟选择器（ ~ ） 往下所有兄弟

  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.       h2 ~ * {
  11.           border: 1px solid red;
  12.           padding: 10px;
  13.       }
  14.     </style>
  15.   </head>
  16.   <body>
  17.     <h2>PHP中文网</h2>
  18.     <h1>第十八期</h1>
  19.     <div>
  20.         <p>
  21.             <span>item0</span>
  22.         </p>
  23.         <p>item2</p>
  24.         <p>item3</p>
  25.         <span>php.cn</span>
  26.     </div>
  27.     <p>我是一个段落标签</p>
  28.     <a href="#">我是一个链接标签</a>
  29.   </body>
  30. </html>

三、选择器的权重

  • 权重

    同权重的后者覆盖前者；
    不同权重可用公式来计算：百位（ID数量），十位（CLASS数量），个位（TAG标签数量）；
    !important的权重最高。
    例：
    #id.title p 权重为：1 1 1
    div#id.vip p 权重为：1 1 2
    结论：后者优先级高于前者

  • 为什么不推荐使用id和tag,而是class

    • id权重太高，后期维护不便；
    • tag数量太少，不灵活；
    • class名称完全自定义，无数据限制，灵活性高。
上一条：配置 PackMan 镜像下一条：CSS样式介绍及优先级讲解
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多