偽類選擇器

權(quán)重同class一樣

結(jié)構(gòu)偽類：根據(jù)元素位置獲取元素

1. :first-of-type 獲取第一個(gè)
   例：獲取class為“l(fā)ist”的第一個(gè)子元素
   .list > item:first-of-type

2. :last-of-type 獲取最后一個(gè)
   例：獲取class為“l(fā)ist”的最后一個(gè)子元素
   .list >item:first-of-type

3. :nth-of-type(n) 獲取任意一個(gè)
   n為幾就獲取第幾個(gè)元素
   例：獲取class為“l(fā)ist”的第3個(gè)子元素
   .list >item:nth-of-type(3)

4. :nth-last-of-type(n) 獲取倒數(shù)第幾個(gè)元素
   n為幾就獲取倒數(shù)第幾個(gè)元素
   例：獲取class為“l(fā)ist”的倒數(shù)第2個(gè)子元素
   .list >item:nth－last-of-type(2)

偽類選擇器的參數(shù)

:nth-of-type(an+b)
參數(shù)說(shuō)明

1. 當(dāng)a=0時(shí)，an+b=b，即偏移量是幾就匹配第幾個(gè)元素，屬于單個(gè)元素匹配。

2. 當(dāng)a=1時(shí)，an+b=n+b，即取偏移量及之后的所有元素。
   例:.lsit > item:nth-of-type(n+2) 就是取第2個(gè)及之后的所有元素。

3. 當(dāng)a=-1時(shí)，an+b=-n+b，即取偏移量及之前的所有元素。
   例：.list > item:nth-of-type(-n+3) 即取前3個(gè)元素

4. 當(dāng)a=-1時(shí)，:nth-last-of-type(-n+b) 為取倒數(shù)幾個(gè)元素。
   例：.list > item:nth-last-of-type(-n+3) 即取后3個(gè)元素

5.當(dāng)an+b=2n+1時(shí)，為取奇數(shù)位的元素1,3,5,7,9…,可以簡(jiǎn)化為 “odd” 即： .list > item:nth-of-type(odd)

6.當(dāng)an+b=2n時(shí)，為取偶數(shù)位的元素，2,4,6,8,10…,可以簡(jiǎn)化為 “even” 即：.list > item:nth-of-type(even)

引入字體圖標(biāo)的詳細(xì)步驟

以引入阿里圖標(biāo)庫(kù)為例：
第1步：將圖標(biāo)添加到購(gòu)物車－下載代碼
第2步：將代碼解壓復(fù)制到項(xiàng)目目錄中，在項(xiàng)目中引入CSS文件
第3步：在元素中引入圖標(biāo)樣式
例：```html
<span class="iconfont icon-shezhi"></span>

![](https://img.php.cn/upload/image/112/954/964/1641217831146287.jpg)
# 盒模型的5個(gè)屬性
#### `box-sizing:` 值有兩個(gè)：
1. border-box：邊框、內(nèi)邊距和外邊距都計(jì)算在width/height內(nèi)，不會(huì)把盒子撐開。
2. content-box：邊框、內(nèi)外邊距單獨(dú)存在，會(huì)把盒子撐開。導(dǎo)致盒子整體的寬度和高度會(huì)變大。
#### 五個(gè)屬性：
1. width 寬度
2. height 高度
3. padding 內(nèi)邊距
4. margin 外邊距
5. border 邊框
#### box-sizing兩個(gè)取值的差異：
1. border-box:
```html
        .box {
            width: 20em;
            height: 20em;
            background-color: aquamarine;
            border: 5px solid red;
            box-sizing: border-box;
            padding: 3em;
            overflow: hidden;
        }

通過(guò)上圖可以看出，box并沒有被撐大，而是把內(nèi)容區(qū)域縮小了。

1. content-box:

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

   
   
   通過(guò)上圖可以看出，box內(nèi)容區(qū)域并沒有變化，但是，邊框內(nèi)邊距把box整體撐開了。

em , rem的區(qū)別

• em與當(dāng)前元素或父元素的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中文網(wǎng)
       </div>
       <div class="item2">
           PHP.cn中文網(wǎng)
       </div>
   </div>

  
  
  
  通過(guò)上圖可以看出，類為item的元素，字體為2em,與其父元素的font-size:16綁定，結(jié)果為32px;類為item2的元素，字體為2rem，與html的font-size:20px綁定，結(jié)果為40px。

批改老師：PHPz

批改狀態(tài)：合格

老師批語(yǔ)：