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

css基础之元素样式，基本选择器和选择器的权重

程序员文章站 2022-05-29 12:50:29
...

css 基础

  • css 是什么？
    css 是层叠样式表
    功能：元素样式（元素长什么样）和元素布局（元素应该放在哪里）

  • 元素样式的来源

    1.浏览器默认样式（又叫用户代理样式）
    |样式|定义|
    |——-|——-|
    |用户代理样式|浏览器默认样式|
    |用户自定义样式|我们的编程目标|

权重 样式 代码
3 行内样式 style=”…”;
2 内部样式/文档样式 \<style>
1 外部样式 .css 文件
0 默认样式 —-

示例代码：

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    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.     <title>Document</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <h2>hello word</h2>
    11. 

  11.   </body>
    12. 

  12. </html>
    13.

style="";

css基础之元素样式，基本选择器和选择器的权重
css基础之元素样式，基本选择器和选择器的权重

  • 样式来源除了与优先级有关系还与书写顺序有关
    写到后面的会覆盖前面的

css 工作流：1.找到元素 2.设置样式

  • 选择器
    选择器{一个或多个样式声明}

    | 序号 | 选择器/selector | 代码 | 说明： |
    | —— | ———————- | ———————— | —————————————— |
    | 1 | 标签选择器 | h1{} | 直接使用标签进行选择 |
    | 2 | 属性选择器 | [...],id,class | 通过标签的属性进行选择 |
    | 3 | 群组选择器 | h1,h2,h3 | 选择多个元素进行声明 |
    | 4 | 通配选择器 | * | 选中某个标签下所有的标签元素 |
    | 5 | 上下文选择器 | * | 选中某个标签下所有的标签元素 |

    1.标签选择器

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    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.     <title>Document</title>
    8. 

  8.     <style>
    9. 

  9.       h1 {
    10. 

  10.         color: red;
    11. 

  11.       }
    12. 

  12.     </style>
    13. 

  13.   </head>
    14. 

  14.   <body>
    15. 

  15.     <div>
    16. 

  16.       <h1>hello word</h1>
    17. 

  17.     </div>
    18. 

  18.   </body>
    19. 

  19. </html>
    20.

2.属性选择器

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    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.     <title>Document</title>
    8. 

  8.     <style>
    9. 

  9.       h1.h1{
    10. 

  10.         color: green;
    11. 

  11.       }
    12. 

  12.       h1 {
    13. 

  13.         color: red;
    14. 

  14.       }
    15. 

    16. 

  16.     </style>
    17. 

  17.   </head>
    18. 

  18.   <body>
    19. 

  19.     <div>
    20. 

  20.       <h1>hello word</h1>
    21. 

  21.       <h1 class="h1">hello word</h2>
    22. 

  22.     </div>
    23. 

  23.   </body>
    24. 

  24. </html>
    25.

3.群组选择器

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    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.     <title>Document</title>
    8. 

  8.     <style>
    9. 

  9.       h1.h1,h1{
    10. 

  10.         color: green;
    11. 

  11.       }
    12. 

  12.       /* h1 {
    13. 

  13.         color: red;
    14. 

  14.       } */
    15. 

    16. 

  16.     </style>
    17. 

  17.   </head>
    18. 

  18.   <body>
    19. 

  19.     <div>
    20. 

  20.       <h1>hello word</h1>
    21. 

  21.       <h1 class="h1">hello word</h2>
    22. 

  22.     </div>
    23. 

  23.   </body>
    24. 

  24. </html>
    25.

4.通配选择器

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    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.     <title>Document</title>
    8. 

  8.     <style>
    9. 

  9.       html body  div * {
    10. 

  10.         color: green;
    11. 

  11.       }
    12. 

  12.       /* h1.h1, */
    13. 

    14. 

    15. 

  15.       /* h1 {
    16. 

  16.         color: red;
    17. 

  17.       } */
    18. 

    19. 

  19.     </style>
    20. 

  20.   </head>
    21. 

  21.   <body>
    22. 

  22.     <table>
    23. 

  23.     <div>
    24. 

  24.       <h1>hello word</h1>
    25. 

  25.       <h1 class="h1">hello word</h2>
    26. 

  26.     </div>
    27. 

  27.   </table>
    28. 

  28.   </body>
    29. 

  29. </html>
    30.

5.上下文选择器

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    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.     <title>Document</title>
    8. 

  8.     <style>
    9. 

  9.       .list .item.one + * {
    10. 

  10.         border: 1px solid #000;
    11. 

  11.       }
    12. 

  12.     </style>
    13. 

  13.   </head>
    14. 

  14.   <body>
    15. 

  15.     <ul class="list">
    16. 

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

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

  18.       <li class="item">
    19. 

  19.         item3
    20. 

  20.         <ul class="list one">
    21. 

  21.           <li class="item one">item3-1</li>
    22. 

  22.           <li class="item">item3-2</li>
    23. 

  23.           <li class="item">item3-3</li>
    24. 

  24.         </ul>
    25. 

  25.       </li>
    26. 

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

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

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

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

  30.       <li class="item">item8</li>
    31. 

  31.     </ul>
    32. 

  32.   </body>
    33. 

  33. </html>
    34.
  • 继承inherit 
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    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.     <title>Document</title>
    8. 

  8.     <style>
    9. 

  9.       .div {
    10. 

  10.         width: 100px;
    11. 

  11.         height: 50px;
    12. 

  12.         border: 1px solid #000;
    13. 

  13.         color: red;
    14. 

  14.       }
    15. 

  15.       .p {
    16. 

  16.         color: green;
    17. 

  17.         color: inherit;
    18. 

  18.       }
    19. 

  19.     </style>
    20. 

  20.   </head>
    21. 

  21.   <body>
    22. 

  22.     <div class="div">
    23. 

  23.       <p class="p">tag p</p>
    24. 

  24.     </div>
    25. 

  25.   </body>
    26. 

  26. </html>
    27.

选择器的权重

  • 权重分析

两个 p 标签权重都是 0,0,1
写在后面的样式生效，如果我们想要让写在前面的 p 标签蓝色生效，就需要提权

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    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.     <title>Document</title>
    8. 

  8.     <style>
    9. 

  9.       p {
    10. 

  10.         color: blue;
    11. 

  11.       }
    12. 

  12.       p {
    13. 

  13.         color: red;
    14. 

  14.         width: 100px;
    15. 

  15.         height: 20px;
    16. 

  16.         border: 1px solid red;
    17. 

  17.       }
    18. 

  18.     </style>
    19. 

  19.   </head>
    20. 

  20.   <body>
    21. 

  21.     <div>
    22. 

  22.       <p>选择器的权重</p>
    23. 

  23.     </div>
    24. 

  24.   </body>
    25. 

  25. </html>
    26.

这里我们在\<style>里把写在上方的 p 标签的样式提权，可以这么做

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    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.     <title>Document</title>
    8. 

  8.     <style>
    9. 

  9.       /* 权重：0,0,4 */
    10. 

  10.       html body div p {
    11. 

  11.         color: blue;
    12. 

  12.       }
    13. 

  13.       /* 权重：0,0,3 */
    14. 

  14.       body div p {
    15. 

  15.         color: blueviolet;
    16. 

  16.       }
    17. 

  17.       /* 权重：0,0,2 */
    18. 

  18.       div p {
    19. 

  19.         color: burlywood;
    20. 

  20.       }
    21. 

  21.       /* 权重：0,0,1       */
    22. 

  22.       p {
    23. 

  23.         color: red;
    24. 

  24.         width: 100px;
    25. 

  25.         height: 20px;
    26. 

  26.         border: 1px solid red;
    27. 

  27.       }
    28. 

  28.     </style>
    29. 

  29.   </head>
    30. 

  30.   <body>
    31. 

  31.     <div>
    32. 

  32.       <p>选择器的权重</p>
    33. 

  33.     </div>
    34. 

  34.   </body>
    35. 

  35. </html>
    36.

这里我们可以看出这四种写法权重都不同，也就代表着每个 tag 的权重都为 1，权重越高越优先

我们再来看另一种权重，类权重（class）

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    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.     <title>Document</title>
    8. 

  8.     <style>
    9. 

  9.       /* 权重(0,1,1) */
    10. 

  10.       p.p {
    11. 

  11.         color: blue;
    12. 

  12.       }
    13. 

  13.       /* 权重(0,1,0)       */
    14. 

  14.       .p {
    15. 

  15.         color: green;
    16. 

  16.       }
    17. 

  17.       /* 权重：0,0,1       */
    18. 

  18.       p {
    19. 

  19.         color: red;
    20. 

  20.         width: 100px;
    21. 

  21.         height: 20px;
    22. 

  22.         border: 1px solid red;
    23. 

  23.       }
    24. 

  24.     </style>
    25. 

  25.   </head>
    26. 

  26.   <body>
    27. 

  27.     <div>
    28. 

  28.       <p class="p">选择器的权重</p>
    29. 

  29.     </div>
    30. 

  30.   </body>
    31. 

  31. </html>
    32.

这里我们可以看到同样都是选择的同一个 p 标签但是权重各不同，写在最上方的 p.p 权重最高

我们再来看一个 id 选择器的权重

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    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.     <title>Document</title>
    8. 

  8.     <style>
    9. 

  9.       /* 权重(1,0,0) */
    10. 

  10.       #p {
    11. 

  11.         color: hotpink;
    12. 

  12.       }
    13. 

  13.       /* 权重(0,1,1) */
    14. 

  14.       p.p {
    15. 

  15.         color: blue;
    16. 

  16.       }
    17. 

  17.       /* 权重(0,1,0)       */
    18. 

  18.       .p {
    19. 

  19.         color: green;
    20. 

  20.       }
    21. 

  21.       /* 权重：0,0,1       */
    22. 

  22.       p {
    23. 

  23.         color: red;
    24. 

  24.         width: 100px;
    25. 

  25.         height: 20px;
    26. 

  26.         border: 1px solid red;
    27. 

  27.       }
    28. 

  28.     </style>
    29. 

  29.   </head>
    30. 

  30.   <body>
    31. 

  31.     <div>
    32. 

  32.       <p class="p" id="p">选择器的权重</p>
    33. 

  33.     </div>
    34. 

  34.   </body>
    35. 

  35. </html>
    36.

这里使用了 id 选择器，权重直接变成了(1,0,0)

  • 总结
    选择器的权重和标签，id，class 的数量有关系权重越高优先级越大
序号 选择器 标识 权重
1 标签 tag (0,0,1)
2 class “.” (0,1,0)
3 id “”#”” (1,0,0)

为什么不推荐使用 Tag 和 id 做选择器？

  • 不推荐使用 Tag 的原因
    Tag 的数量优先，class 可以自定义，发挥的空间要远大于 Tag

  • 不推荐使用 id 的原因
    经过选择器的分期我们就可以得出为什么不使用 id 作为选择器，就是因为 id 的权重太高！！！

上一篇： js闭包/类创建/解构赋值

下一篇： 一个简易的课程表和注册表单

推荐阅读