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

CSS:基本选择器、层级选择器、选择器权重优先级

程序员文章站 2023-12-23 19:55:27
...
    

  1. <!DOCTYPE html>
    2. 

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

    4. 

  4. <head>
    5. 

  5.     <meta charset="UTF-8" />
    6. 

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

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

  8.     <title>选择器1：基本选择器</title>
    9. 

  9. </head>
    10. 

    11. 

  11. <body>
    12. 

  12.     <h2>itme1</h2>
    13. 

  13.     <h2 title="hello">itme2</h2>
    14. 

  14.     <h2 id="a">item3</h2>
    15. 

  15.     <h2 id="a">item4</h2>
    16. 

  16.     <h2 class="b">item5</h2>
    17. 

  17.     <h2 class="b">item6</h2>
    18. 

    19. 

  19.     <style>
    20. 

  20.         /* 基本选择器：根据元素自身特点来选择 */
    21. 

  21.         /* 1.标签选择器 */
    22. 

    23. 

  23.         h2 {
    24. 

  24.             color: red;
    25. 

  25.         }
    26. 

  26.         /* 2.属性选择器 */
    27. 

    28. 

  28.         h2[title="hello"] {
    29. 

  29.             color: green;
    30. 

  30.         }
    31. 

  31.         /* 3.id选择器，用于唯一元素，id唯一性由程序员控制，浏览器不检查 */
    32. 

    33. 

  33.         h2[id="a"] {
    34. 

  34.             color: blue;
    35. 

  35.         }
    36. 

  36.         /* 4.class类选择器 ，用于多个元素*/
    37. 

    38. 

  38.         h2[class="b"] {
    39. 

  39.             color: violet;
    40. 

  40.         }
    41. 

  41.         /* id ,class是高频属性 */
    42. 

    43. 

  43.         h2#a,
    44. 

  44.         h2.b {
    45. 

  45.             /* color: orange; */
    46. 

  46.             background-color: yellow;
    47. 

  47.         }
    48. 

  48.         /* 层叠样式表，后面的覆盖前面的 */
    49. 

  49.         /* 通配符，选择下面所有的元素 */
    50. 

    51. 

  51.         html body * {
    52. 

  52.             background-color: gray;
    53. 

  53.             /* background-color: gray !important; */
    54. 

  54.             /* !important;//提权到100%，优先级别最高 */
    55. 

  55.         }
    56. 

  56.         /* 上下文选择器 */
    57. 

  57.     </style>
    58. 

  58. </body>
    59. 

    60. 

  60. </html>
    61.

CSS:基本选择器、层级选择器、选择器权重优先级

    

  1. <!DOCTYPE html>
    2. 

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

    4. 

  4. <head>
    5. 

  5.     <meta charset="UTF-8" />
    6. 

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

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

  8.     <title>选择器2：层级选择器/上下文选择器</title>
    9. 

  9. </head>
    10. 

    11. 

  11. <body>
    12. 

  12.     <!-- ul.list>li.item*8{itme$} -->
    13. 

  13.     <ul class="list">
    14. 

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

  15.         <li class="item second">itme2</li>
    16. 

  16.         <li class="item">
    17. 

  17.             itme3
    18. 

  18.             <!-- ul.inner>li*3{item3_$} -->
    19. 

  19.             <ul class="inner">
    20. 

  20.                 <li>item3_1</li>
    21. 

  21.                 <li>item3_2</li>
    22. 

  22.                 <li>item3_3</li>
    23. 

  23.             </ul>
    24. 

  24.         </li>
    25. 

  25.         <li class="item">itme4</li>
    26. 

  26.         <li class="item">itme5</li>
    27. 

  27.         <li class="item">itme6</li>
    28. 

  28.         <li class="item">itme7</li>
    29. 

  29.         <li class="item">itme8</li>
    30. 

  30.     </ul>
    31. 

    32. 

  32.     <style>
    33. 

  33.         /* 1.子元素 */
    34. 

    35. 

  35.         .list>li {
    36. 

  36.             border: 1px solid #000;
    37. 

  37.         }
    38. 

  38.         /* 2.后代，选择所有的后代，不加>  空格即可 */
    39. 

    40. 

  40.         .list li {
    41. 

  41.             border: 1px solid rgb(248, 26, 26);
    42. 

  42.         }
    43. 

  43.         /* 3.相邻关系，相邻兄弟+ */
    44. 

    45. 

  45.         .item.second+* {
    46. 

  46.             background-color: gray;
    47. 

  47.         }
    48. 

  48.         /* 4.选择所有兄弟，后面的 */
    49. 

    50. 

  50.         .item.second~* {
    51. 

  51.             background-color: rgb(223, 26, 26);
    52. 

  52.         }
    53. 

  53.     </style>
    54. 

  54. </body>
    55. 

    56. 

  56. </html>
    57.

CSS:基本选择器、层级选择器、选择器权重优先级

    

  1. <!DOCTYPE html>
    2. 

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

    4. 

  4. <head>
    5. 

  5.     <meta charset="UTF-8" />
    6. 

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

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

  8.     <title>3.选择器的权重/优先级（重点）</title>
    9. 

  9. </head>
    10. 

    11. 

  11. <body>
    12. 

  12.     <h1 class="title" id="active">Hello</h1>
    13. 

  13.     <style>
    14. 

  14.         body h1.title#active {
    15. 

  15.             /* 1 1 2 */
    16. 

  16.             color: red;
    17. 

  17.         }
    18. 

    19. 

  19.         body h1.title {
    20. 

  20.             /* 0 1 2 */
    21. 

  21.             color: greenyellow;
    22. 

  22.         }
    23. 

    24. 

  24.         body h1 {
    25. 

  25.             /* 0 0 2 */
    26. 

  26.             /* body加上后，权重变为0 0 2 */
    27. 

  27.             color: darkorange;
    28. 

  28.         }
    29. 

    30. 

  30.         h1 {
    31. 

  31.             /* 0 0 1 */
    32. 

  32.             color: green;
    33. 

  33.             /* 后面的覆盖前面的 ，如果要前面的生效，则要提权*/
    34. 

  34.         }
    35. 

  35.         /* 规则
    36. 

    37. 

  37.         第一位：标签数量 个位
    38. 

  38.         第二位：class数量 十位
    39. 

  39.         第三位：id数量 百位 
    40. 

  40.         id不推荐使用，因为权重太高了，为了让代码具有弹性，尽量使用class
    41. 

  41.         为什么不使用最低权重的标签呢，因为标签数量太少了，而class可以任意命名。
    42. 

    43. 

  43.         */
    44. 

  44.         /* h1 {
    45. 

  45.             color: violet !important;
    46. 

  46.         } */
    47. 

  47.         /* bootsrap ,element ui这些都不能改，因为升级会覆盖 */
    48. 

  48.     </style>
    49. 

    50. 

  50.     <div class="col-md-3 vip">Bootstrap</div>
    51. 

  51.     <style>
    52. 

  52.         div.col-md-3.vip {
    53. 

  53.             border: 6px solid rgb(241, 14, 60);
    54. 

  54.         }
    55. 

    56. 

  56.         div.col-md-3 {
    57. 

  57.             border: 1px solid #002;
    58. 

  58.         }
    59. 

  59.     </style>
    60. 

  60. </body>
    61. 

    62. 

  62. </html>
    63.

CSS:基本选择器、层级选择器、选择器权重优先级

上一篇：

下一篇：

推荐阅读