search

博客列表 >css伪类选择器状态匹配、选择器的优先级提权、字体的属性简写、盒子模型缩写方案

css伪类选择器状态匹配、选择器的优先级提权、字体的属性简写、盒子模型缩写方案

吳
吳 原创
2020年12月17日 16:05:18580浏览

css伪类选择器状态匹配、选择器的优先级提权、字体的属性简写、盒子模型缩写方案

1. css伪类选择器：状态匹配

链接四种状态，顺序是固定的
1.默认状态，没访问过：a:link {...}
2.已访问过状态：a:visited {...}
3.悬停状态：a:hover {...}
4.激活状态，当鼠标按压下去时：a:active {...}

  • 1.默认状态，没访问过a:link {...}

    1. <html lang="en">
    2. <head>
    3.   <meta charset="UTF-8">
    4.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.   <title>伪类选择器：状态匹配</title>
    6.   <style>
    7.       /* 1.默认状态，没有访问过 */
    8.       a:link {
    9.           color: red;
    10.       }
    11.   </style>
    12. </head>
    13. <body>
    14.   <a href="https://www.jd.com/">京东</a>
    15. </body>
    16. </html>

    演示截图

  • 2.已访问过状态a:visited {...}

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>伪类选择器：状态匹配</title>
  6.     <style>
  7.         /* 2.已访问过状态 */
  8.         a:visited {
  9.             color: green;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <a href="https://www.baidu.com/">百度一下</a>
  15. </body>
  16. </html>

演示截图

  • 3.悬停状态
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>伪类选择器：状态匹配</title>
  6.     <style>
  8.         /* 3.悬停状态 */
  9.         a:hover {
  10.             background-color: yellow;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <a href="https://www.baidu.com/">百度一下</a>
  16. </body>
  17. </html>

演示截图

  • 4.激活状态，当鼠标按压下去时
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>伪类选择器：状态匹配</title>
  6.     <style>
  7.         /* 4.激活状态，当鼠标按压下去时 */
  8.         a:active {
  9.             background-color: violet;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <a href="https://www.baidu.com/">百度一下</a>
  15. </body>
  16. </html>

演示截图

2. 选择器的优先级

选择器优先级：id > class > tag
1.选择器相同时，与源码顺序有关，后面的样式覆盖前面的
2.选择器不同时，与优先级有关，优先级高的覆盖低的

  • 1.当选择器相同时，后面的样式覆盖前面的
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>选择器的优先级</title>
  7.     <style>
  8.         h1 {
  9.             background-color: violet;
  10.         }
  12.         h1 {
  13.             background-color: yellow;
  14.         }
  15.         /* 当选择器相同时，后面的样式覆盖前面的 */
  16.     </style>
  17. </head>
  18. <body>
  19.     <h1 class="a" id="b">Hello World</h1>
  20. </body>
  21. </html>

演示截图

  • 2.当选择器不同是，级别高的覆盖级别低的
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>选择器的优先级</title>
  6.     <style>
  7.         h1 {
  8.             background-color: violet;
  9.         }
  11.         h1 {
  12.             background-color: yellow;
  13.         }
  14.         /* 当选择器相同时，后面的样式覆盖前面的 */
  16.         .a {
  17.             background-color: red;
  18.         }
  19.         #b {
  20.             background-color: skyblue;
  21.         }
  22.         /* 当选择器不同是，级别高的id覆盖级别低的class
  23.         结论：id > class >tag */
  24.     </style>
  25. </head>
  26. <body>
  27.     <h1 class="a" id="b">Hello World</h1>
  28. </body>
  29. </html>

演示截图

3. 选择器的优先级的提权方法

计算公式：[id的数量，class的数量，tag的数量]
tag级向class进位，class级向id级进位

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>选择器优先级的提权方法</title>
  6.     <style>
  7.         /* 
  8.         计算公式：[id的数量，class的数量，tag数量] 
  9.         tag级向class进位，class级向id级进位 */
  10.         /* [0,0,1] */
  11.         h1 {
  12.             background-color: yellow;
  13.         }
  14.         /* [0,0,2] */
  15.         body h1 {
  16.             background-color: skyblue;
  17.         }
  18.         /* [0,0,3] */
  19.         html body h1 {
  20.             background-color: red;
  21.         }
  22.         /* [0,1,1] */
  23.         h1.a {
  24.             background-color: violet;
  25.         }
  26.         /* [0,1,2] */
  27.         body h1.a {
  28.             background-color: green;
  29.         }
  30.         /* [0,1,3] */
  31.         html body h1.a {
  32.             background-color:tomato;
  33.         }
  34.         /* [1,0,1] */
  35.         h1#b {
  36.             background-color:wheat;
  37.         }
  38.         /* [1,0,2] */
  39.         body h1#b {
  40.             background-color:teal;
  41.         }
  42.         /* [1,0,3] */
  43.         html h1#b {
  44.             background-color:pink;
  45.         }
  46.         /* [1,1,1] */
  47.         h1#b.a {
  48.             background-color:saddlebrown;
  49.         }
  50.     </style>
  51. </head>
  52. <body>
  53.     <h1 class="a" id="b">Hello World!</h1>
  54. </body>
  55. </html>

演示截图

4. 字体属性的简写与引入字体图标

  • 4-1 字体属性的简写
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>字体属性的简写</title>
  6.     <style>
  7.         .title {
  8.             /* font-family: sans-serif;
  9.             font-size: 35px;
  10.             font-style: italic;
  11.             font-weight: lighter; */
  12.         /* 简写 */
  13.         font: italic lighter 15px sans-serif;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <h1 class="title">php中文网</h1>
  19. </body>
  20. </html>

演示截图

  • 4-2 引入字体图标
  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>引入字体图标</title>
  6.     <link rel="stylesheet" href="icon-font/iconfont.css">
  7.     <style>
  8.         .iconfont {
  9.             color: red;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <span class="iconfont icon-kehuguanli"></span>
  15. </body>
  16. </html>

演示截图

5. 盒模型的属性与缩写方案

  1. <html lang="en">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>盒模型的属性与缩写</title>
  6.     <style>
  7.         .box {
  8.             height: 200px;
  9.             width: 200px;
  10.             background-color: skyblue;
  11.             box-sizing: border-box;
  12.         }
  13.         /* 边框 */
  14.         .box {
  15.             border-top: 5px red solid;
  16.             border-bottom: teal 5px solid;
  17.             /* 缩写 */
  18.             border: 5px black solid;
  19.         }
  20.         /* 内边距 */
  21.         .box {
  22.             /* 内边距：上右下左，按顺时针排序 */
  23.             padding: 5px 6px 8px 10px;
  24.             background-clip: content-box;
  26.             /* 三值 */
  27.             padding: 10px 20px 15px;
  29.             /* 二值 */
  30.             padding: 10px 20px;
  32.             /* 单值 */
  33.             padding: 30px;
  35.             /* 结论：当使用三值和二值时，只需要记住第二个永远表示左右就可以了 */
  36.         }
  37.         /* 外边距 */
  38.         .box {
  39.             /* 控制多个盒子之间的排列间距 */
  40.             /* 四值，按顺时针，上右下左 */
  41.             margin: 10px 5px 6px 7px;
  43.             /* 三值 */
  44.             margin: 5px 6px 7px;
  46.             /* 二值 */
  47.             margin: 8px 7px;
  49.             /* 单值:四个方向全相等 */
  50.             margin: 20px;
  51.         }
  52.     </style>
  53. </head>
  54. <body>
  55.     <div class="box"></div>
  56. </body>
  57. </html>

演示截图

上一条：1215-css引入和选择器下一条：1215 css的三种引入方式 + 选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多