Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 伪类选择器、字体图标、盒模型属性、em和rem 的区别小结
Blogger Information
Blog 29
fans 0
comment 0
visits 14925
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
伪类选择器、字体图标、盒模型属性、em和rem 的区别小结
cool442
Original
535 people have browsed it

一、伪类选择器（权重属类级）

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>伪类选择器</title>
  8.   </head>
  9.   <body>
  10.     <!-- 1. 结构伪类：根据元素的位置选择元素 -->
  11.     <!-- 格式一： 标签:nth-of-type(数字)    说明：选择同类型中的第n个同级兄弟元素 -->
  12.     <!-- 格式二： 标签:nth-last-of-type(数字)    说明：选择同类型中的倒数第n个同级兄弟元素 -->
  13.     <!-- 格式三： 标签:first-of-type(数字)    说明：选择同类型中的第1个同级兄弟元素 -->
  14.     <!-- 格式二： 标签:last-of-type(数字)    说明：选择同类型中的倒数第1个同级兄弟元素 -->
  15.     <ul class="w1">
  16.       <li>排行第1</li>
  17.       <li>排行第2</li>
  18.       <li>排行第3</li>
  19.       <p>另一家人不是同类，不影响选择</p>
  20.       <p>另一家人不是同类，不影响选择</p>
  21.       <li>排行第4</li>
  22.       <li>排行第5</li>
  23.       <li>排行第6</li>
  24.     </ul>
  25.     <style>
  26.       /* 选择正数第二个li */
  27.       .w1 > li:nth-of-type(2) {
  28.         color: rgb(180, 70, 175);
  29.       }
  30.       /* 选择正数第五个li */
  31.       .w1 > li:nth-of-type(5) {
  32.         color: rgb(180, 70, 175);
  33.       }
  34.       /* 选择倒数第三个li */
  35.       .w1 > li:nth-last-of-type(3) {
  36.         font-size: 35px;
  37.       }
  38.       /* 这里没有指定li，所以选择第1个li和第1个p */
  39.       .w1 :first-of-type {
  40.         background-color: wheat;
  41.       }
  42.       /* 选择最后的li */
  43.       .w1 li:last-of-type {
  44.         background-color: thistle;
  45.       }
  46.     </style>
  48.     <!-- 2. nth-of-type（）的计算方法：  -->
  49.     <!-- an+b : 
  50.                 a 选择单个或多个元素，取值：0，1，2...
  51.                 n 自动取值：0，1，2...
  52.                 b 计算元素位置偏移量，取值：0，1，2...     -->
  53.     <ul class="w2">
  54.       <li>打进了1个好球</li>
  55.       <li>打进了2个好球</li>
  56.       <li>打进了3个好球</li>
  57.       <li>打进了4个好球</li>
  58.       <li>打进了5个好球</li>
  59.       <li>打进了6个好球</li>
  60.       <li>打进了7个好球</li>
  61.       <li>打进了8个好球</li>
  62.     </ul>
  63.     <style>
  64.       /* a=0 an等于0,选择单个元素,an+2=2，选择第二个元素 */
  65.       .w2 :nth-of-type(0n + 2) {
  66.         color: tomato;
  67.       }
  68.       /* a=1 an=n，选择多个元素，an+2计算结果：
  69.         n=0时为2；n=1时为3；n=2时为4...n=7时为9，超过元素数量，不再计算。
  70.         选择2至8元素 */
  71.       .w2 :nth-of-type(1n + 2) {
  72.         color: turquoise;
  73.       }
  74.       /* a=2 选择多个元素，an+2计算结果：
  75.         n=0时为2；n=1时为4；n=2时为6...n=4时为10，不再计算
  76.         则选择2,4,6,8元素 */
  77.       .w2 :nth-of-type(2n + 2) {
  78.         color: blue;
  79.       }
  80.     </style>
  82.     <!-- 3. 状态伪类：根据元素状态来选择元素 -->
  83.     <button class="b1">鼠标在按钮上时变手，背景变黄，按下变蓝</button>
  84.     <style>
  85.       .b1:hover {
  86.         cursor: pointer;
  87.         background-color: yellow;
  88.       }
  89.       .b1:active {
  90.         background-color: turquoise;
  91.       }
  92.     </style>
  93.   </body>
  94. </html>

二、使用字体图标

  • 使用字体图标可下载或通过链接使用
  • 常用字体图标网站下载 https://www.iconfont.cn/
  • 下载后放到网站目录
  • 在页面中引入
    <link rel="stylesheet" href="./font_ico/iconfont.css" />
  • 在标签中设置样式，字体图标样式可看网站提示
  • 示例：
  1. <!DOCTYPE html>
  2. <html lang="en">
  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>字体图标</title>
  8.     <link rel="stylesheet" href="./font_ico/iconfont.css" />
  9.   </head>
  10.   <body>
  11.     <i class="iconfont icon-icon_issue_leader_add"></i>
  12.     <span class="iconfont icon-icon_issue_add_on"></span>
  13.   </body>
  14. </html>

运行效果

三、盒模型的 5 个属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>盒模型的 5 个属性</title>
  8.   </head>
  9.   <body>
  10.     <!-- 盒模型常用的5个属性：
  11.       width宽度
  12.       height高度
  13.       border边框
  14.       padding内边距
  15.       margin外边距 -->
  16.     <div class="div1"><div>盒子1</div></div>
  17.     <div class="div2"><div>盒子2</div></div>
  18.     <style>
  19.       /* 盒子外边尺寸：宽300+30*2+60*2=480px
  20.                   高200+30*2+60*2=380px */
  21.       .div1 {
  22.         width: 300px;
  23.         height: 200px;
  24.         border: 30px solid;
  25.         padding: 60px;
  26.         margin-bottom: 50px;
  27.       }
  28.       .div1 div {
  29.         background-color: turquoise;
  30.         width: 100%;
  31.         height: 100%;
  32.       }
  33.       /* 盒子外边尺寸：宽300
  34.                   高200
  35.                   设置了box-sizing属性后， 盒子内部被内边距压缩*/
  36.       .div2 {
  37.         width: 300px;
  38.         height: 200px;
  39.         border: 30px solid;
  40.         padding: 60px;
  41.         box-sizing: border-box;
  42.       }
  43.       .div2 div {
  44.         background-color: rgb(224, 64, 211);
  45.         width: 100%;
  46.         height: 100%;
  47.       }
  48.     </style>
  49.   </body>
  50. </html>

运行效果

四、em，rem 单位的区别

- em ： 总是和当前或父级的 font-size 绑定

- rem ： 总是和 html 根元素的 font-size 绑定

  1. <!DOCTYPE html>
  2. <html lang="en">
  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>em，rem 单位的区别</title>
  8.   </head>
  9.   <body>
  10.     <!-- em ： 总是和当前或父级的 font-size 绑定
  11.            rem ： 总是和 html 根元素的 font-size 绑定 -->
  12.     <style>
  13.       /* 父元素font-size为20px */
  14.       .bb {
  15.         font-size: 20px;
  16.       }
  17.       /* 根元素Html设置font-size为40px */
  18.       html {
  19.         font-size: 40px;
  20.       }
  21.       /* 盒子1大小与.bb样式绑定，即10*20=200 */
  22.       .d1 {
  23.         width: 10em;
  24.         height: 10em;
  25.         background-color: tomato;
  26.         margin: 20px 0;
  27.       }
  28.       /* 盒子2大小与html样式绑定，即10*40=400 */
  29.       .d2 {
  30.         width: 10rem;
  31.         height: 10rem;
  32.         background-color: tomato;
  33.       }
  34.     </style>
  35.     <div class="bb">
  36.       <div class="d1">盒子1</div>
  37.       <div class="d2">盒子2</div>
  38.     </div>
  39.   </body>
  40. </html>

运行效果

Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post