一. css中的選擇器及其權重

概括：當出現樣式層疊時（使用不同的選擇器但是匹配到的是同一個元素且設置的是同一個樣式屬性）由選擇器的權重或者在樣式表中的位置決定

1. 選擇器權重

選擇器的權重的值由四個獨立的部分 a,b,c,d 組成。進行復合選擇器的權重計算時四個部分是獨立的，不會出現進位。在比較大小時按從 a-b-c-d 的順序依次進行比較，高位相同才需要比較低位。

2.常用選擇器

1. 基本/通配符選擇器：

通配符選擇器使用*來定義，用來匹配所以的元素，他的權重是0,0,0,0 常用于清楚瀏覽器默認樣式

/* 通配符選擇器，可以匹配所有的元素 */
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    list-style: none;
}

2. 標簽選擇器

標簽選擇器是指用html標簽名字elementName作為選擇器，為頁面中的某一類標簽指定統(tǒng)一的CSS樣式，他的權重是0,0,0,1,

/* 標簽選擇器，為所以的li標簽元素設置color顏色 */
li{
    color: aqua;
}

3. 類選擇器

類選擇器使用className來定義，如果想要差異性選擇不同的標簽，可以使用類選擇器，可以把某一些標簽元素共同擁有的樣式放到同一個類中。這樣這些元素可以添加這個公共的類，然后也可以添加自己獨有的類。

/* 這三個元素具有相同的顏色屬性，所以將他們放同一個類中 */
.item{
    color: aqua;
}
/*background-color屬性是第一個元素獨有的樣式，所以可以將他設置為一個獨有的類 */
.first{
    background-color:red;
}

    <ul class="nav">
        <li>item1</li>
        <li>item2</li>
        <li>item3
            <ul class="list">
                <li class="item first">list1</li>
                <li class="item">list2</li>
                <li class="item last">list3</li>
            </ul>
        </li>
        <li>item4</li>
        <li>item5</li>
        <li>item6</li>
        <li>item7</li>
        <li>item8</li>
        <li>item9</li>
    </ul>

4. ID選擇器

id選擇器用idName來定義，id選擇器一般用于選擇頁面唯一的元素，他的權重是0,1,0,0

        /* 為id為paw的元素設置寬度樣式 */
        #paw{
            width: 50px;
        }

    <label for="paw">密碼：</label><input type="password" name="" id="paw">

二. 偽類選擇器

1. 結構偽類選擇器

結構偽類選擇器
結構偽類選擇器用于選擇具有某些特定特征的一類元素的選擇器，他們的這些特征和 html 結構（在 html 中的位置）有關。他們的權重是 0,0,1,0（同類選擇器）。

(1.) E:nth-child()示例

      /* nth-child 匹配子級的第幾個元素，括號內定義 */
      .nav > .list:nth-child(3) {
        color: aqua;
      }

(2.) E:nth-last-child()示例

      /* nth-last-child  從最后一個元素往前數，括號內定義 */
      .nav > .list:nth-last-child(4) {
        color: blue-;
      }

(3. ) E:first-child 示例

      /* :first-child 匹配第一個子級元素 */
      .nav > :first-child {
        color: brown-;
      }

(4.) E:last-child 示例

      /* last-child匹配最后一個元素 */
      .nav > :last-child {
        color: blueviolet;
      }

(5.) E:nth-child()/E:last-child() 括號計算公式=a*n + b

      /*a= 0,1,2,3,...
        n= 0,1,2,3,...
        b= 從0開始...
        an + b  =a*n +b*/
      /* 偶數 even =2n
         奇數 odd  =2n+1 */

示例1

      /* 獲取前五個 a=-1 反向 */
      .nav > :nth-child(-n + 5) {
        color: blueviolet;
      }

示例2

      /* 獲取后五個  */
 .nav > :nth-last-child(-n + 5) {
        color: blueviolet;
      }

示例3

      /* 獲取雙數  */
      .nav > :nth-last-child(2n) {
        color: blueviolet;
      }

ps:雙數可以用even表示

示例4

      /* 獲取單數  */
      .nav > :nth-last-child(2n + 1) {
        color: blueviolet;
      }

ps:雙數可以用odd表示

2. 狀態(tài)偽類選擇器

(1). hover 鼠標懸停 示例

      /* hover 鼠標懸停 */
      .nav > .list:nth-child(3):hover {
        background-color: aquamarine;
        color: beige;
      }

ps:需要注意的是這四個偽類的書寫順序：
:link 和 :visited 必須寫在 :hover 和 :active前面，否則 :hover 和 :active 的樣式將被覆蓋（層疊）掉。
:hover 必須寫在 :active 的前面，否則點擊樣式會被鼠標覆蓋樣式層疊（點擊元素必然是在鼠標覆蓋元素的情況下發(fā)生）。
平時使用時按照需求按照上面的順序書寫。
:hover 和 :active 不只對 a 元素有效，也可以應用于其他元素。

三. 盒子模型

盒子模型組成有 4 部分,分別為:內容 內邊距 邊框

外邊距(不計入盒子實際寬度)

盒子模型有 2 種:標準盒子模型與怪異盒子模型

(1). 標準盒子模型=content(內容)+border(邊框)+padding(內邊距)

<div class="box"></div>

      .box {
        width: 200px;
        height: 100px;
        border: 2px solid black;
        padding: 20px;
        background-color: aquamarine;
      }

ps: width=200 + border22(左右) +padding2020(左右) =244px

(2). 怪異盒子模型=content(內容)(已經包含了 padding 和 border)

<div class="box"></div>

      .box {
        width: 200px;
        height: 100px;
        border: 2px solid black;
        padding: 20px;
        background-color: aquamarine;
        box-sizing: border-box;
      }

ps:

默認值 box-sizing: content-box; width=200 + border22(左右) +padding2020(左右) =244px

怪異盒子模型box-sizing: border-box; 內容區(qū)content 已經包含了內邊距padding和邊框border

批改老師：PHPz

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

老師批語：作業(yè)依舊完成的很好，很認真，繼續(xù)加油