通過3月15日直播課程的學(xué)習(xí),熟悉了選擇器中的偽類選擇器的應(yīng)用,掌握了關(guān)于選擇器權(quán)重的相關(guān)知識,以及box-sizing屬性的實際用法和好處。

1. 偽類選擇器

偽類選擇器分類兩種：一是結(jié)構(gòu)偽類選擇器，二是狀態(tài)偽類選擇器。

1.1 結(jié)構(gòu)偽類

• :nth-child()
• :first-child
• :last-child
• :ntf-last-child()

  結(jié)構(gòu)偽類實例

  /* 偽類選擇器實例css */
  /* 用結(jié)構(gòu)偽類中的:nth-child()實現(xiàn)精準(zhǔn)控制某個元素 */
  .list > .item:nth-child(2){
    background-color:red;
  }
  .list > .item:nth-child(5){
    background-color: blueviolet;
  }
  /* 用結(jié)構(gòu)偽類中的:first-child控制第一個元素 */
  .list > .item:first-child{
    background-color: blueviolet;
  }
  /* 用結(jié)構(gòu)偽類中的:last-child控制最后一個元素 */
  .list > .item:last-child{
    background-color: chartreuse;
  }
  /* 用結(jié)構(gòu)偽類中的:nth-last-child()控制從最后一個元素倒數(shù)的第某個元素 */
  .list > .item:nth-last-child(2){
    background-color: darkcyan;
  }
  .list > .item:nth-last-child(3){
    background-color: darkgoldenrod;
  }

  運(yùn)行效果如下:

/* 通過:nth-child(-n+3)實現(xiàn)控制前3個元素 */
 .list > .item:nth-child(-n+3){
    background-color: blue;
 }
 /* 通過:nth-last-child(-n+3)實現(xiàn)控制倒數(shù)前4個元素 */
.list > .item:nth-last-child(-n+4){
    background-color: antiquewhite;
}

運(yùn)行效果如下:

/* 通過:nth-child(n)實現(xiàn)控制所有元素 */
.list > .item:nth-child(n){
    background-color: brown;
}

運(yùn)行效果如下:

/* 通過:nth-child(n+3)實現(xiàn)控制從第3個元素開始的所有元素 */
.list > .item:nth-child(n+3){
    background-color: bisque;
}

運(yùn)行結(jié)果如下:

/* 通過:nth-last-child(n+5)實現(xiàn)控制倒數(shù)第5個元素開始的往前數(shù)所有元素 */
.list > .item:nth-last-child(n+5){
    background-color: bisque;
}

運(yùn)行結(jié)果如下:

/* 通過結(jié)構(gòu)偽類:nth-child(2n)或者：nth-child(even)實現(xiàn)控制偶數(shù)元素 */
.list > .item:nth-child(even){
    background-color: blueviolet;
}

運(yùn)行結(jié)果如下:

/* 通過結(jié)構(gòu)偽類:nth-child(2n+1)或者:nth-child(odd)實現(xiàn)對奇數(shù)元素的控制 */
.list > .item:nth-child(odd){
    background-color: chocolate;
}

運(yùn)行結(jié)果如下:

/* nth-child(an+b) 當(dāng)a>=2時,固定間隔a-1,可以用偏移量b來進(jìn)行微調(diào),可正可負(fù)*/
.list > .item:nth-child(3n+2){
    background-color: brown;
}

運(yùn)行結(jié)果如下:

1.2 狀態(tài)偽類

• :hover:鼠標(biāo)懸停
• enabled:有效控件
• disabled:禁用控件
• checked:選中控件
• required:必填控件
• focus:焦點(diǎn)控件
• not():過濾掉某些元素
• empty:空

狀態(tài)偽類主要用于修飾鏈接和表單

<form action="">
    <fieldset class="login">
        <div>
            <legend class="title">用戶登錄</legend>
            <label for="uname">用戶名:</label>
            <input type="text" name="uname" id="uname">
        </div>
        <div>
            <label for="pwd">密  碼:</label>
            <input type="password" name="pwd" id="pwd">
        </div>
       <div class="remember">
            <input type="checkbox">
            <label for="rem">記住我</label>
       </div>
        <button class="submit">提交</button>
    </fieldset>
   </form>

1.狀態(tài)偽類中的焦點(diǎn)控件:focus

/* 狀態(tài)偽類實例 */
div>input{
    border: none;
    border-bottom: 1px solid gray;
}
/* :focus焦點(diǎn)類實現(xiàn)點(diǎn)擊觸發(fā)焦點(diǎn)后,input文本框邊框加上紅色 */
.login :focus{
    outline: 1px solid red;
    border-bottom: none;
}

實現(xiàn)效果如下

2.狀態(tài)偽類中的必填控件::required

首先在表單中input文本框中加入必填屬性

<input type="text" name="uname" id="uname" required>

在css中加入:required

 /* 狀態(tài)偽類實例 */
div>input{
    border: none;
    border-bottom: 1px solid gray;
}
/* :focus焦點(diǎn)類實現(xiàn)點(diǎn)擊觸發(fā)焦點(diǎn)后,input文本框邊框加上紅色 */
.login :focus{
    outline: 1px solid red;
    border-bottom: none;
}
.login :required{
    background-color: aqua;
}

實現(xiàn)效果如下:

3.狀態(tài)偽類中的選中控件:checked

.login input:checked + label{
    color: blue;
}

實現(xiàn)效果如下:

4.狀態(tài)偽類中的鼠標(biāo)懸停::hover

.login>.submit:hover{
    background-color: brown;
    color: white;
    cursor: pointer;
}

執(zhí)行效果如下:

2. 選擇器權(quán)重

元素 = 標(biāo)簽 + 屬性
原子選擇器:標(biāo)簽(tag)+類(class)+id
權(quán)重大小:
tag:1, class:10, id:100

權(quán)重需要累加

<h2 class="title" id="header">php中文網(wǎng)</h2>

/* 類class的 權(quán)重是10,字體顏色為紅色*/
.title{
    color: red;
}

效果如下

/* 類class:title 權(quán)重是10,
   id:header 的權(quán)重是100,權(quán)重高于,title,因此字體顯示藍(lán)色blue
*/
#header{
    color: blue;
}
.title{
    color: red;
}

執(zhí)行效果如下:

* 類class:title 權(quán)重是10,
   id:header 的權(quán)重是100,h2是標(biāo)簽,權(quán)重是1. h2#header總共權(quán)重是101,為最高權(quán)重,因此字體顯示綠色green
*/
h2#header{
    color: green;
}
#header{
    color: blue;
}
.title{
    color: red;
}

執(zhí)行效果如下:

* 在類.title加了!important為最高權(quán)重,因此顯示字體為紅色
*/
h2#header{
    color: green;
}
#header{
    color: blue;
}
.title{
    color: red!important;
}

執(zhí)行效果如下:

3.盒模型 中的box-sizing屬性

添加一個盒子<div class="box"></div>
css代碼如下:

/* 寬度設(shè)置為100px,高度設(shè)置為50px,但是實際的盒子大小是122*72
寬度是:100+20+2,高度是50+20+2  是加上邊框border和內(nèi)邊距padding后的結(jié)果*/
.box{
    width: 100px;
    height: 50px;
    border: 1px solid red;
    padding: 10px;
}

這是因為盒子大小計算方法的屬性box-sizing的默認(rèn)值是content-box
content-box計算方法是:盒子大小需要設(shè)置的寬高加上邊框+內(nèi)邊距.
border-box計算方法是:盒子大小直接以設(shè)置的width和height為準(zhǔn).

/* 寬度設(shè)置為100px,高度設(shè)置為50px,因為box-sizing的值是:border-box
所以盒子大小就是100*50
*/
.box{
    width: 100px;
    height: 50px;
    border: 1px solid red;
    padding: 10px;
    box-sizing: border-box;
}

通過這次直播課程,掌握了結(jié)構(gòu)偽類和狀態(tài)偽類兩種偽類選擇器使用方法,熟悉了選擇器權(quán)重的知識,懂得了box-sizing屬性值的運(yùn)用.

批改老師：PHPz

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

老師批語：完成的非常好，只是下次提交作業(yè)的時候要在“我的課程作業(yè)”界面中選擇“我要做作業(yè)”就行提交，并且在提交界面的狀態(tài)一欄選擇“作業(yè)”即可