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

元素样式/选择器及权重

程序员文章站 2022-05-16 21:18:10
...

元素样式来源

浏览器默认：用户代理样式

当页面没有设置任何样式时，浏览器将采用浏览器的默认代理样式，如下：

    

  1. <body>
    2. 

  2.     <h1>Hello word</h1>
    3. 

  3. </body>
    4.

用户自定义样式

用户自己设置页面内容的显示样式

    

  1. <body>
    2. 

  2.     <h1 style="color: red">Hello word</h1>
    3. 

  3. </body>
    4.

基本及上下文选择器

基本选择器

    

  1. <body>
    2. 

  2.     <h2>item1</h2>
    3. 

  3.     <h2 title="hello">item2</h2>
    4. 

  4.     <h2 id="a">item3</h2>
    5. 

  5.     <h2 id="a">item4</h2>
    6. 

  6.     <h2 class="b">item4</h2>
    7. 

  7.     <style>
    8. 

  8.       /* 基本选择器：根据元素自身来选择 */
    9. 

  9.       /* 1. 标签选择器  */
    10. 

  10.       h2 {
    11. 

  11.         color: red;
    12. 

  12.       }
    13. 

  13.       /* 2. 属性选择器 */
    14. 

  14.       h2[title="hello"] {
    15. 

  15.         color: green;
    16. 

  16.       }
    17. 

  17.       /* id:用于唯一元素 */
    18. 

  18.       h2[id="a"] {
    19. 

  19.         color: blue;
    20. 

  20.       }
    21. 

  21.       /* id:用于多个元素 */
    22. 

  22.       h2[class="b"] {
    23. 

  23.         color: violet;
    24. 

  24.       }
    25. 

  25.       h2#a {
    26. 

  26.         color: cyan;
    27. 

  27.       }
    28. 

  28.       h2.b {
    29. 

  29.         color: orange;
    30. 

  30.       }
    31. 

  31.       /* 3. 群组选择器 */
    32. 

  32.       h2#a,
    33. 

  33.       h2.b {
    34. 

  34.         background-color: yellow;
    35. 

  35.       }
    36. 

  36.       /* 4. 通配符选择器 */
    37. 

  37.       html body * {
    38. 

  38.         background-color: gray;
    39. 

  39.       }
    40. 

  40.     </style>
    41. 

  41.   </body>
    42.

上下文选择器

    

  1. <body>
    2. 

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

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

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

  5.       <li class="item">
    6. 

  6.         item3
    7. 

  7.         <ul class="inner">
    8. 

  8.           <li>item3-1</li>
    9. 

  9.           <li>item3-2</li>
    10. 

  10.           <li>item3-3</li>
    11. 

  11.         </ul>
    12. 

  12.       </li>
    13. 

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

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

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

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

  17.       <li class="item">item8</li>
    18. 

  18.     </ul>
    19. 

  19.     <style>
    20. 

  20.       /* 1. 子元素 > */
    21. 

  21.       .list > li {
    22. 

  22.         border: 1px solid #000;
    23. 

  23.       }
    24. 

  24.       /* 2. 后代元素 > */
    25. 

  25.       .list li {
    26. 

  26.         border: 1px solid #000;
    27. 

  27.       }
    28. 

  28.       /* 3. 相邻兄弟 */
    29. 

  29.       .item.second + * {
    30. 

  30.         background-color: red;
    31. 

  31.       }
    32. 

  32.       /* 4. 选择后面所有兄弟 */
    33. 

  33.       .item.second ~ * {
    34. 

  34.         background-color: yellow;
    35. 

  35.       }
    36. 

  36.     </style>
    37. 

  37.   </body>
    38.

选择器的权重

    

  1. <body>
    2. 

  2.     <h1 class="title" id="active">Hello</h1>
    3. 

  3.     <style>
    4. 

  4.       /* 1,1,2 */
    5. 

  5.       body h1.title#active {
    6. 

  6.         color: yellow;
    7. 

  7.       }
    8. 

  8.       /* 0,1,2 */
    9. 

  9.       body h1.title {
    10. 

  10.         color: red;
    11. 

  11.       }
    12. 

  12.       /* 0,0,2 */
    13. 

  13.       body h1 {
    14. 

  14.         color: green;
    15. 

  15.       }
    16. 

  16.       /* 0,0,1 */
    17. 

  17.       h1 {
    18. 

  18.         color: darkorange;
    19. 

  19.       }
    20. 

  20.       /* 三个权重的位置（从右到左）
    21. 

  21.       第一位：标签数量
    22. 

  22.       第二位：class数量
    23. 

  23.       第三位：id数量 */
    24. 

  24.     </style>
    25. 

  25.   </body>
    26.

总结：id: 因为权重太高，代码弹性弱，一般不用；标签数量又太少，而class可以任意命名，所以，在实际生产环境，尽可能用class。

上一篇： JSON的使用以及传统XHR, Fetch, async, await的使用场景

下一篇： php中使用getimagesize获取图片、flash等文件的尺寸信息实例

推荐阅读