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

css伪类选择器详解,如何引入阿里矢量字体图标库,盒模型及常用单位简介

程序员文章站 2022-05-21 23:25:42
...

css 伪类选择器详解，如何引入字体图标库，盒模型

  • 伪类的定义
伪 类
表示假的 class 级权重
  • 伪类的类型
伪类的类型 作用
结构伪类 根据位置获取元素
状态伪类 根据状态获取元素

结构伪类

  • 常用的语法
结构伪类语法 代码 用法
取指定位置的元素 :nth-of-type() 直接在“()”内填写要取第几个元素
倒着取指定位置的元素 :nth-last-of-type() 直接在“()”内填写要取倒数第几个元素
取第一个 first-of-type 取第一个元素
取倒数第一个 last-of-type 取倒数第一个元素

  • 伪类选择器的参数

    nth-of-type(an+b)

参数 规则
a 系数 [0,1,2,3…]
n 权数 [0,1,2,3…]
b 偏移量 从 0 开始

注:计算出来的索引必须是有效，从 1 开始

  • 选择元素只有两种情况： 1.选择一个 2.选择一组
    匹配单个元素 a=0
    匹配多个元素 a>=1
  • 匹配单个元素代码示例(a=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>伪类选择器匹配单个元素(a=0)</title>
    8. 

  8.     <style>
    9. 

  9.       /* 注：因为我们要取单个元素，所以a=0，n为从0开始自动计算，b为我们要找的元素的偏移量。
    10. 

  10.       我们要取的是ul下的第三个li所以偏移量b=3。
    11. 

  11.       匹配过程：a=0，n=【0,1,2,3...直到索引结束】，b=3
    12. 

  12.       a*n=0，b=3，an+b=3，因为0乘任何数都等一零，所以当a=0时只会索引一次 */
    13. 

  13.       .list > li:nth-of-type(0n + 3) {
    14. 

  14.         background-color: coral;
    15. 

  15.       }
    16. 

  16.     </style>
    17. 

  17.   </head>
    18. 

  18.   <body>
    19. 

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

  20.       <li>item1</li>
    21. 

  21.       <li>item2</li>
    22. 

  22.       <li>item3</li>
    23. 

  23.       <li>item4</li>
    24. 

  24.       <li>item5</li>
    25. 

  25.       <li>item6</li>
    26. 

  26.       <li>item7</li>
    27. 

  27.       <li>item8</li>
    28. 

  28.     </ul>
    29. 

  29.   </body>
    30. 

  30. </html>
    31.
  • 匹配多个元素代码示例(a=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>伪类选择器匹配单个元素(a=0)</title>
    8. 

  8.     <style>
    9. 

  9.       /* 注：因为我们要取多个元素，所以a=1，n为从0开始自动计算，b为我们要找的元素的偏移量。
    10. 

  10.        我们要取的是ul下的第三个包括下面的所有li元素，所以偏移量b=3。
    11. 

  11.        匹配过程：a=1，n=【0,1,2,3...直到索引结束】，b=3
    12. 

  12.       第一遍索引：1*0+3=0+3=3
    13. 

  13.       第二遍索引：1*1+3=1+3=4
    14. 

  14.       第三遍索引：1*2+3=2+3=5
    15. 

  15.       第四遍索引：1*3+3=3+3=6
    16. 

  16.       第五遍索引：1*4+3=4+3=7
    17. 

  17.       第六遍索引：1*5+3=5+3=8
    18. 

  18.       第七遍索引：1*6+3=6+3=9！索引到这里索引的到第九个元素，代码里没有第九个li，所以索引超纲自动停止，索引结束 */
    19. 

  19.       .list > li:nth-of-type(1n + 3) {
    20. 

  20.         background-color: coral;
    21. 

  21.       }
    22. 

  22.     </style>
    23. 

  23.   </head>
    24. 

  24.   <body>
    25. 

  25.     <ul class="list">
    26. 

  26.       <li>item1</li>
    27. 

  27.       <li>item2</li>
    28. 

  28.       <li>item3</li>
    29. 

  29.       <li>item4</li>
    30. 

  30.       <li>item5</li>
    31. 

  31.       <li>item6</li>
    32. 

  32.       <li>item7</li>
    33. 

  33.       <li>item8</li>
    34. 

  34.     </ul>
    35. 

  35.   </body>
    36. 

  36. </html>
    37.

如果我们想要向上取参数参数为：(-1n+b)
如果我们要取偶数参数为：(2n),但是这里我们有更简洁的方式，参数只需要填 even;
如果我们要取奇数参数为：(2n+1),但是这里我们有更简洁的方式，参数只需要填 odd;

表单伪类

  • 状态伪类
代码 作用
disabled 禁用状态
enabled 启用状态
checked 选中状态
hover 鼠标悬停状态
focus 获取焦点状态

以下时代码示例：

    

  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>状态选择器</title>
    8. 

  8.     <style>
    9. 

  9.       /* 所有开放的input的属性 */
    10. 

  10.       input:enabled {
    11. 

  11.         /* 背景色：绿 */
    12. 

  12.         background-color: green;
    13. 

  13.         border: 3px dotted green;
    14. 

  14.       }
    15. 

  15.       /* 所有未开放的input的属性 */
    16. 

  16.       input:disabled {
    17. 

  17.         /* 背景色：红 */
    18. 

  18.         background-color: red;
    19. 

  19.         /* 边框尺寸3px 虚线 绿色 */
    20. 

  20.         border: 3px dotted green;
    21. 

  21.       }
    22. 

  22.       /* 当男被选中后后面的label内的内容变为蓝色 */
    23. 

  23.       #male:checked + * {
    24. 

  24.         /* 文本色：蓝 */
    25. 

  25.         color: blue;
    26. 

  26.       }
    27. 

  27.       /* 当女被选中后后面label内的内容变为红色 */
    28. 

  28.       #female:checked + * {
    29. 

  29.         /* 文本色：红 */
    30. 

  30.         color: red;
    31. 

  31.       }
    32. 

  32.       /* input获取焦点时的样式 */
    33. 

  33.       input:focus {
    34. 

  34.         /* 背景色：royalblue */
    35. 

  35.         background-color: royalblue;
    36. 

  36.       }
    37. 

  37.       button {
    38. 

  38.         /* 高100 */
    39. 

  39.         width: 100px;
    40. 

  40.         /* 宽30 */
    41. 

  41.         height: 30px;
    42. 

  42.         /* 边框：无 */
    43. 

  43.         border: none;
    44. 

  44.         /* 轮廓线：无 */
    45. 

  45.         outline: none;
    46. 

  46.         /* 背景色：红 */
    47. 

  47.         background-color: red;
    48. 

  48.         /* 文本色：白 */
    49. 

  49.         color: white;
    50. 

  50.       }
    51. 

  51.       /* 鼠标悬停hover样式 */
    52. 

  52.       button:hover {
    53. 

  53.         background-color: seagreen;
    54. 

  54.         color: black;
    55. 

  55.         cursor: pointer;
    56. 

  56.       }
    57. 

  57.     </style>
    58. 

  58.   </head>
    59. 

  59.   <body>
    60. 

  60.     <div>
    61. 

  61.       <label for="username">username:</label>
    62. 

  62.       <input type="text" name="username" id="username" value="admin" disabled />
    63. 

  63.     </div>
    64. 

  64.     <div>
    65. 

  65.       <label for="">password:</label>
    66. 

  66.       <input type="password" name="password" id="password" />
    67. 

  67.     </div>
    68. 

  68.     <div>
    69. 

  69.       <input type="radio" name="gender" id="male" value="0" />
    70. 

  70.       <label for="male">男</label>
    71. 

  71.       <input type="radio" name="gender" id="female" value="1" />
    72. 

  72.       <label for="female">女</label>
    73. 

  73.       <p><button type="submit">提交</button></p>
    74. 

  74.     </div>
    75. 

  75.   </body>
    76. 

  76. </html>
    77.

开发小技巧-引用字体图标库

  • 什么是字体图标？
    图标样式的字体，本质上仍然是字体/文本
  • 阿里矢量图标库

  • 如何引用图标库？

    1.使用 link 标签链接到图标库
    <link rel="stylesheet" href="./图标库文件地址/" />

    2.使用图标库(class 里填写相对应的图标名称即可)
    <span class="iconfont WIFI icon-WIFI"></span>

  • 完整引入演示代码如下

    

  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.     <!-- 引入字体图标库css文件 -->
    8. 

  8.     <link rel="stylesheet" href="./font_icon/iconfont.css" />
    9. 

  9.     <title>引入字体图标库</title>
    10. 

  10.     <style>
    11. 

  11.       /* 设置字体图标的样式：大小，颜色； */
    12. 

  12.       div.iconfont.qrcode.icon-qrcode {
    13. 

  13.         font-size: 100px;
    14. 

  14.         color: red;
    15. 

  15.       }
    16. 

  16.     </style>
    17. 

  17.   </head>
    18. 

  18.   <body>
    19. 

  19.     <!-- 使用字体图标 -->
    20. 

  20.     <div class="iconfont qrcode icon-qrcode"></div>
    21. 

  21.   </body>
    22. 

  22. </html>
    23.

盒模型

  • 盒模型的常用属性
序号 代码 作用 备注
1 width 宽
2 height 高
3 border 边框 可视化属性，有多种样式，solid实线，dashed虚线
4 pandding 内边距
5 margin 外边距

1.通常情况下我们给一个元素边框和背景色，背景色会融入到边框内，这时我们只需要给该元素一个样式就可以了。背景色裁切：background-clip: content-box;这个代码的意思是内容在盒子中心。
2.通常我们在布局中给的width和height都是希望这是盒子的大小，但是通常会因为边框，内边距和外边距等等的因素出现撑大了盒子的宽和高，所以这里我们要用到一个代码 box-sizing:border-box,此时的width和height设置的宽高就是我们盒子计算的宽高，不会因为盒子的其他元素改变盒子的尺寸。

  • padding 语法
类型 语法 解释
单值语法 padding:20px 上下左右四个值都是 20px
双值语法 padding:20px 30px 左右 20px 上下 30px
三值语法 padding:20px 30px 20px 左 20px 上下 30px 右 20px
四值语法 padding:30px 20px 30px 20px 顺时针语法：上 30px 右 20px 下 30px 左 20px
  • 以下是代码详情示例以及解析
    

  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>盒模型</title>
    8. 

  8.     <style>
    9. 

  9.       /* 初始化所有元素的内边距和外边距，并且设置盒子的大小不受内外边距和边框的影响，只由width和height决定大小 */
    10. 

  10.       * {
    11. 

  11.         /* 内边距padding */
    12. 

  12.         padding: 0px;
    13. 

  13.         /* 外边距margin */
    14. 

  14.         margin: 0px;
    15. 

  15.         /* 设置元素大小只能由width和height决定 */
    16. 

  16.         box-sizing: border-box;
    17. 

  17.         /* 边框=1px 实现边框 红色 */
    18. 

  18.         outline: 1px solid red;
    19. 

  19.       }
    20. 

  20.       /* 盒模型常用属性
    21. 

  21.         1.width
    22. 

  22.         2.height
    23. 

  23.         3.border
    24. 

  24.         4.padding
    25. 

  25.         5.margin */
    26. 

  26.       /* 这里是class=box的div标签的样式声明 */
    27. 

  27.       .box {
    28. 

  28.         /* 宽：200px */
    29. 

  29.         width: 200px;
    30. 

  30.         /* 高：200px */
    31. 

  31.         height: 200px;
    32. 

  32.         /* 边框：10px 虚线 红色（已被下方的边框声明覆盖） */
    33. 

  33.         border: 10px dashed red;
    34. 

  34.         /* 背景色：黑色 */
    35. 

  35.         background-color: black;
    36. 

  36.         /* 背景裁切：在盒子内 */
    37. 

  37.         background-clip: content-box;
    38. 

  38.         /* 内边距：20px（因为.box的权重为（0,1,0） 所以覆盖了全局设置的padding） */
    39. 

  39.         padding: 20px;
    40. 

  40.         /* 外边距：20px */
    41. 

  41.         margin: 20px-;
    42. 

  42.         /* 这里我们在全局设置中设置了box-sizing：border-box，所以元素的宽度为左右border（边框的大小）+左右padding（内边距的大小）+width=10(左边框)+20(左padding)+140(元素内容部分的宽度)+10(右边框)+20(右padding)=200 */
    43. 

  43.         /* 元素的宽度为上下border（边框的大小）+上下padding（内边距的大小）+height=20(上边框)+20(上padding)+120(元素内容部分的高度)+20(下边框)+20(下padding)=200 */
    44. 

  44.         /* 设置元素大小只能由width和height决定(由于上方全局设置已经设置过了，这里省略也可以) */
    45. 

  45.         box-sizing: border-box;
    46. 

  46.         /* 为了记忆padding的四值语法，我们这里的边框单独设置也采用了上右下左的顺序 */
    47. 

  47.         /* 单独设置边框上方：20px 实线  红色         */
    48. 

  48.         border-top: 20px solid red;
    49. 

  49.         /* 单独设置边框右方：10px 虚线 蓝色 */
    50. 

  50.         border-right: 10px dashed blue;
    51. 

  51.         /* 单独设置边框下方：20px 实线 红色*/
    52. 

  52.         border-bottom: 20px solid red;
    53. 

  53.         /* 单独设置边框左方：10px 虚线 蓝色 */
    54. 

  54.         border-left: 10px dashed blue;
    55. 

  55.       }
    56. 

  56.       /* 这里是class=box1的div标签的样式声明 */
    57. 

  57.       /* 这个样式声明主要是为了测试上面的全局声明，看下是否生效，元素的大小是否只由width和height来决定而不是会收到padding(内边距)和margin(外边距)的影响 */
    58. 

  58.       .box1 {
    59. 

  59.         /* 宽：300px */
    60. 

  60.         width: 300px;
    61. 

  61.         /* 高：300px */
    62. 

  62.         height: 300px;
    63. 

  63.         /* 内边距：100px */
    64. 

  64.         padding: 100px-;
    65. 

  65.         /* 外边距：100px */
    66. 

  66.         margin: 100px-;
    67. 

  67.       }
    68. 

  68.     </style>
    69. 

  69.   </head>
    70. 

  70.   <body>
    71. 

  71.     <!-- 这里是class=box的div标签 -->
    72. 

  72.     <div class="box"></div>
    73. 

  73.     <!-- 这里是class=box1的div标签 -->
    74. 

  74.     <div class="box1">aaaaa</div>
    75. 

  75.   </body>
    76. 

  76. </html>
    77.

常用单位

  • 常用单位的种类
序号 单位类型 符号
1 绝对单位 px(像素)： 1lin(英寸)=96px
2 相对单位 em：永远和当前或父级的 font-size(字号)进行绑定
3 相对单位 rem:永远和 html(根元素)中的 font-size 进行绑定
4 相对单位 vw:常用在响应式布局（多在移动端）,指把视口宽度分为 100 份，1vw=1/100
5 相对单位 vh:常用在响应式布局（多在移动端）,指把视口高度分为 100 份，1vh=1/100
  • 以下是 px，em，rem，vw，vh 代码的示例
    

  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>常用单位</title>
    8. 

  8.     <style>
    9. 

  9.       * {
    10. 

  10.         padding: 0px;
    11. 

  11.         margin: 0px;
    12. 

  12.         box-sizing: border-box;
    13. 

  13.       }
    14. 

  14.       html {
    15. 

  15.         /* 这里我们给html（根元素）设置一个统一的字号：10px */
    16. 

  16.         font-size: 10px;
    17. 

  17.       }
    18. 

  18.       .box {
    19. 

  19.         /* 这里我们给div.box一个单独的字号 */
    20. 

  20.         font-size: 20px;
    21. 

  21.         /* 宽=5em=5*20px=100px */
    22. 

  22.         width: 5em;
    23. 

  23.         /* 高=10rem=10*10px=100px */
    24. 

  24.         height: 10rem;
    25. 

  25.         border: 1px solid red;
    26. 

  26.         background-color: black;
    27. 

  27.         background-clip: content-box;
    28. 

  28.       }
    29. 

  29.       .box {
    30. 

  30.         /* 这里我们把视窗宽度分为100份，100vw=100%宽度 */
    31. 

  31.         width: 100vw;
    32. 

  32.         /* 这里我们把视窗高度分为100份，10vh=10%高度 */
    33. 

  33.         height: 10vh;
    34. 

  34.       }
    35. 

  35.     </style>
    36. 

  36.   </head>
    37. 

  37.   <body>
    38. 

  38.     <div class="box">aaaaa</div>
    39. 

  39.   </body>
    40. 

  40. </html>
    41.

上一篇： C语言中字符型数据和浮点型数据介绍

下一篇： 移动端布局rem+vw，grid布局

推荐阅读