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

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

程序员文章站 2023-12-26 22:43:09
...

一、元素的样式来源

  • 用户代理样式

    浏览器内置
  • 自定义样式

    • 内联样式
      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名称完全自定义,无数据限制,灵活性高。

上一篇:

下一篇: