CSS伪类选择器，引入字体图标，盒模型以及em和rem的区别

程序员文章站 2022-06-01 20:24:15

...

伪类选择器

权重同class一样

结构伪类：根据元素位置获取元素

:first-of-type 获取第一个
例：获取class为“list”的第一个子元素
.list > item:first-of-type
:last-of-type 获取最后一个
例：获取class为“list”的最后一个子元素
.list >item:first-of-type
:nth-of-type(n) 获取任意一个
n为几就获取第几个元素
例：获取class为“list”的第3个子元素
.list >item:nth-of-type(3)
:nth-last-of-type(n) 获取倒数第几个元素
n为几就获取倒数第几个元素
例：获取class为“list”的倒数第2个子元素
.list >item:nth－last-of-type(2)

伪类选择器的参数

:nth-of-type(an+b)
参数说明

参数	说明	取值
a	系数	从0开始
n		从0开始
b	偏移量	从0开始

当a=0时，an+b=b，即偏移量是几就匹配第几个元素，属于单个元素匹配。
当a=1时，an+b=n+b，即取偏移量及之后的所有元素。
例:.lsit > item:nth-of-type(n+2) 就是取第2个及之后的所有元素。
当a=-1时，an+b=-n+b，即取偏移量及之前的所有元素。
例：.list > item:nth-of-type(-n+3) 即取前3个元素
当a=-1时，:nth-last-of-type(-n+b) 为取倒数几个元素。
例：.list > item:nth-last-of-type(-n+3) 即取后3个元素

5.当an+b=2n+1时，为取奇数位的元素1,3,5,7,9…,可以简化为 “odd” 即： .list > item:nth-of-type(odd)

6.当an+b=2n时，为取偶数位的元素，2,4,6,8,10…,可以简化为 “even” 即：.list > item:nth-of-type(even)

引入字体图标的详细步骤

以引入阿里图标库为例：
第1步：将图标添加到购物车－下载代码
第2步：将代码解压复制到项目目录中，在项目中引入CSS文件
第3步：在元素中引入图标样式
例：```html
<span class="iconfont icon-shezhi"></span>


![](https://img.php.cn/upload/image/112/954/964/1641217831146287.jpg)

# 盒模型的5个属性

#### `box-sizing:` 值有两个：
1. border-box：边框、内边距和外边距都计算在width/height内，不会把盒子撑开。
2. content-box：边框、内外边距单独存在，会把盒子撑开。导致盒子整体的宽度和高度会变大。
#### 五个属性：
1. width 宽度
2. height 高度
3. padding 内边距
4. margin 外边距
5. border 边框

#### box-sizing两个取值的差异：
1. border-box:

```html
        .box {
            width: 20em;
            height: 20em;
            background-color: aquamarine;
            border: 5px solid red;
            box-sizing: border-box;
            padding: 3em;
            overflow: hidden;
        }

CSS伪类选择器，引入字体图标，盒模型以及em和rem的区别

通过上图可以看出，box并没有被撑大，而是把内容区域缩小了。

content-box:


     .box {
         width: 20em;
         height: 20em;
         background-color: aquamarine;
         border: 5px solid red;
         box-sizing: content-box;
         padding: 3em;
         overflow: hidden;
     }

通过上图可以看出，box内容区域并没有变化，但是，边框内边距把box整体撑开了。

em , rem的区别

em与当前元素或父元素的font-size绑定

rem只与html(根元素)的font-size绑定


  <style>
     html {
         font-size: 20px;
     }
     .box {
         font-size: 16px;
     }
     .item {
         font-size: 2em;
     }
     .item2 {
         font-size: 2rem;
     }
 </style>
 <div class="box">
     <div class="item">
         PHP.cn中文网
     </div>
     <div class="item2">
         PHP.cn中文网
     </div>
 </div>