博客列表 >css基础之元素样式,基本选择器和选择器的权重

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

NY。
NY。原创
2021年12月25日 00:23:46518浏览

css 基础

  • css 是什么?
    css 是层叠样式表
    功能:元素样式(元素长什么样)和元素布局(元素应该放在哪里)
  • 元素样式的来源

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


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

示例代码:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. </head>
  9. <body>
  10. <h2>hello word</h2>
  11. </body>
  12. </html>

style="";

默认样式
自定义样式

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

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

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

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

    1.标签选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. h1 {
  10. color: red;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div>
  16. <h1>hello word</h1>
  17. </div>
  18. </body>
  19. </html>

2.属性选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. h1.h1{
  10. color: green;
  11. }
  12. h1 {
  13. color: red;
  14. }
  15. </style>
  16. </head>
  17. <body>
  18. <div>
  19. <h1>hello word</h1>
  20. <h1 class="h1">hello word</h2>
  21. </div>
  22. </body>
  23. </html>

3.群组选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. h1.h1,h1{
  10. color: green;
  11. }
  12. /* h1 {
  13. color: red;
  14. } */
  15. </style>
  16. </head>
  17. <body>
  18. <div>
  19. <h1>hello word</h1>
  20. <h1 class="h1">hello word</h2>
  21. </div>
  22. </body>
  23. </html>

4.通配选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. html body div * {
  10. color: green;
  11. }
  12. /* h1.h1, */
  13. /* h1 {
  14. color: red;
  15. } */
  16. </style>
  17. </head>
  18. <body>
  19. <table>
  20. <div>
  21. <h1>hello word</h1>
  22. <h1 class="h1">hello word</h2>
  23. </div>
  24. </table>
  25. </body>
  26. </html>

5.上下文选择器

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. .list .item.one + * {
  10. border: 1px solid #000;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <ul class="list">
  16. <li class="item">item1</li>
  17. <li class="item">item2</li>
  18. <li class="item">
  19. item3
  20. <ul class="list one">
  21. <li class="item one">item3-1</li>
  22. <li class="item">item3-2</li>
  23. <li class="item">item3-3</li>
  24. </ul>
  25. </li>
  26. <li class="item">item4</li>
  27. <li class="item">item5</li>
  28. <li class="item">item6</li>
  29. <li class="item">item7</li>
  30. <li class="item">item8</li>
  31. </ul>
  32. </body>
  33. </html>
  • 继承inherit
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. .div {
  10. width: 100px;
  11. height: 50px;
  12. border: 1px solid #000;
  13. color: red;
  14. }
  15. .p {
  16. color: green;
  17. color: inherit;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div class="div">
  23. <p class="p">tag p</p>
  24. </div>
  25. </body>
  26. </html>

选择器的权重

  • 权重分析

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

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. p {
  10. color: blue;
  11. }
  12. p {
  13. color: red;
  14. width: 100px;
  15. height: 20px;
  16. border: 1px solid red;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <div>
  22. <p>选择器的权重</p>
  23. </div>
  24. </body>
  25. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. /* 权重:0,0,4 */
  10. html body div p {
  11. color: blue;
  12. }
  13. /* 权重:0,0,3 */
  14. body div p {
  15. color: blueviolet;
  16. }
  17. /* 权重:0,0,2 */
  18. div p {
  19. color: burlywood;
  20. }
  21. /* 权重:0,0,1 */
  22. p {
  23. color: red;
  24. width: 100px;
  25. height: 20px;
  26. border: 1px solid red;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div>
  32. <p>选择器的权重</p>
  33. </div>
  34. </body>
  35. </html>

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


我们再来看另一种权重,类权重(class)

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. /* 权重(0,1,1) */
  10. p.p {
  11. color: blue;
  12. }
  13. /* 权重(0,1,0) */
  14. .p {
  15. color: green;
  16. }
  17. /* 权重:0,0,1 */
  18. p {
  19. color: red;
  20. width: 100px;
  21. height: 20px;
  22. border: 1px solid red;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div>
  28. <p class="p">选择器的权重</p>
  29. </div>
  30. </body>
  31. </html>

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


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

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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. /* 权重(1,0,0) */
  10. #p {
  11. color: hotpink;
  12. }
  13. /* 权重(0,1,1) */
  14. p.p {
  15. color: blue;
  16. }
  17. /* 权重(0,1,0) */
  18. .p {
  19. color: green;
  20. }
  21. /* 权重:0,0,1 */
  22. p {
  23. color: red;
  24. width: 100px;
  25. height: 20px;
  26. border: 1px solid red;
  27. }
  28. </style>
  29. </head>
  30. <body>
  31. <div>
  32. <p class="p" id="p">选择器的权重</p>
  33. </div>
  34. </body>
  35. </html>

这里使用了 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 的权重太高!!!

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议