1弛矛、nth-child(odd)與nth-child(even)
eg1:
<div>
<h2>標題</h2>
<p>內容</p>
<h2>標題</h2>
<p>內容</p>
<h2>標題</h2>
<p>內容</p>
<h2>標題</h2>
<p>內容</p>
</div>
h2:nth-child(odd){color:#f66}
h2:nth-child(even){color:#f00}
預期效果：所有H2的基數行顏色替換為#f66;偶數行為#f00;
結果：所有的H2都變?yōu)榱?f66指攒；
解析：nth-child選擇器在計算子元素時第奇數個元素還是偶數個元素時，是連同父元素的所有
子元素一起計算的，換句話說就是
h2:nth-child(odd)指代的時當div中的第奇數個子元素如果時H2子元素的時候使用
eg2:
li:nth-child(odd){font-size: 18px;}
li:nth-child(even){font-size: 36px;}
<div >
<h2>標題A</h2>
<ul>
<li>標題</li>
<li>標題</li>
<li>標題</li>
<li>標題</li>
<li>標題</li>
<li>標題</li>
<li>標題</li>
</ul>
</div>
預期結果：所有李li的基數行字體大小為18px;偶數行為36px;
結果：正確
解析：當父元素是列表的時候锭碳，因為列表中只可能有列表項目一種子元素涣楷，所以不會有問題分唾，而當父元素是div的時候，因為div的子元素中有了不止一種子元素狮斗，所以引起了問題的產生
2绽乔、nth-of-type(odd)奇數和:nth-of-type(even)偶數
將上訴代碼更新之后看效果
作業(yè)：設計條紋狀表格
3、循環(huán)使用樣式
語法: E:nth-child(n){sRules} E":nth-last-child(n){sRules}
eg1:
<ul>
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
<li>4444444</li>
<li>555555</li>
<li>666666</li>
<li>777777</li>
<li>8888888</li>
<li>9999999</li>
<li>0000000</li>
</ul>
1）選取每一行：nth-child(n){font-size:18px;}
語氣結果：每一行都為18px;
結果：正確
2）除第一行之位的所有行nth-child(n+2){color:#f66}
預期結果：除第一行之位的所有行改變顏色;
結果：正確
疑問：為什么時+2
解析：驗證n+1
3）每2行選擇一行：nth-child(2n){font-size:36px;}
預期結果：每一行都為36px;
結果：正確
作業(yè)：每3行選擇一行碳褒；從第4行開始每隔一行選擇一行折砸；反向選擇所有行、倒數第2行沙峻、最后3行
4睦授、only-child：只有一個元素時使用
eg:
<ul class="oul1">
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
<li>4444444</li>
<li>555555</li>
<li>666666</li>
<li>777777</li>
<li>8888888</li>
<li>9999999</li>
<li>0000000</li>
</ul>
<ul class="oul1">
<li>1111111</li>
</ul>
.oul1 li:only-child{font-size:36px;}
預期結果：第2個ul的器效果;
結果：正確
5、UI元素狀態(tài)偽類選擇器
1）E:hover摔寨、E:active睹逃、E:focus
2）E:enabled、E:disabled
eg:
<form>
<input type="radio" id="radio1" name="radio"
onchange="radio_onchange();">可用</radio>
<input type="radio" id="radio2" name="radio"
onchange="radio_onchange();">不可用</radio>

<input type=text id="text1" disabled />
</form>
input[type="text"]:enabled{
background-color:yellow;
}
input[type="text"]:disabled{
background-color:purple;
}

function radio_onchange()
{    
    var radio=document.getElementById("radio1");
    var text=document.getElementById("text1");
    if(radio.checked)
        text.disabled="";
    else
    {
        text.value="";
        text.disabled="disabled";
    }
}
預期結果：可用為黃色祷肯，不可用為紫色
結果OK
3)E:read-only、E:read-write
eg：
<form>
    <p>姓名：<input type="text" name="name" />
    <p>地址：<input type="text" name="address" value="江蘇省蘇州市"
     readonly="readonly" />
    </p>
</form>
input[type="text"]:read-only{
    background-color: gray;
}
input[type="text"]:read-write{
    background-color: greenyellow;
}
input[type="text"]:-moz-read-only{
    background-color: gray;
}
input[type="text"]:-moz-read-write{
    background-color: greenyellow;
}

預期結果：姓名可以編輯疗隶，地址不可以
結果OK
4）E:checked
<form>
    興趣:<input type="checkbox">閱讀</input>
    <input type="checkbox">旅游</input>
    <input type="checkbox">看電影</input>
    <input type="checkbox">上網</input>
</form>
input[type="checkbox"]:checked {
    outline:2px solid blue;
}
input[type="checkbox"]:-moz-checked {
    outline:2px solid blue;
}
預期結果：選中為藍色邊框
結果OK
5）E:default
<form>
    興趣:<input type="checkbox">閱讀</input>
    <input type="checkbox">旅游</input>
    <input type="checkbox">看電影</input>
    <input type="checkbox">上網</input>
</form>
input[type="checkbox"]:default {
    outline:2px solid blue;
}
預期結果：默認狀態(tài)為藍色邊框
結果：木有呢佑笋，不起效果
6）E:inderterminate 當用戶將默認設定為選取狀態(tài)的單選框或者復選框修改為非選取狀態(tài)，
使用default選擇器設定的樣式依然有效
<input type="radio" name="radio" value="male" />男
<input type="radio" name="radio" value="female" />女
input[type="radio"]:indeterminate{
    outline: solid 3px blue;
}
預期結果：默認狀態(tài)為藍色邊框
結果：ok
作業(yè)：完成一組開關按鈕
7)E:selection指定當元素處于選中狀態(tài)時的樣式
<ul>
    <li>11111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    <li>5555</li>
</ul>
li::selection{
    color:#f66
}

預期結果：雙擊文本斑鼻，文字顏色改變?yōu)榧t色
結果：ok
疑問：當為一個：時蒋纬，會發(fā)生什么樣的效果？

6坚弱、相鄰兄弟選擇器
li + li
<ul>
<li>11111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
li+li{
color:#f66
}
預期結果：從第2個li到 5 個li蜀备，一共4個
結果：ok
疑問：假如結構為
<ul>
<li class="oli">11111</li>
<li>2222</li>
<li class="oli">3333</li>
<li>4444</li>
<li class="oli">5555</li>
</ul>
樣式為
.oli + li{
color:red
}
結果會顯示為什么樣的呢
7、通用兄弟選擇器
E~F
<ul>
<li class="active>11111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
.active~li{
color:#f66
}
預期結果：選取的是E后面F的元素
結果：ok
8荒叶、:lang 偽類
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
q:lang(no){
quotes: "~" "~"
}
預期結果：文字段落中的引用的文字文字
結果：ok
疑問：帶有l(wèi)ang屬性的元素有哪些
9碾阁、使用content屬性來插入項目編號
用法：
<元素>：before{
content:counter(計數器名)
}
<元素>{
counter-increment:before選擇器/after選擇器中指定的計數器名
}
eg:
<h1>大標題</h1>
<p>示例文字。</p>
<h1>大標題</h1>
<p>示例文字些楣。</p>
<h1>大標題</h1>
<p>示例文字脂凶。</p>
h1:before{
content: counter(mycounter);
}
h1{
counter-increment: mycounter;
}
預期結果：
1大標題
示例文字。
2大標題
示例文字愁茁。
3大標題
示例文字蚕钦。
結果：ok

補充：如果要在項目編號中追加文字，比說說.   應該為
    h1:before{
    content: counter(mycounter)".";
}
h1{
    counter-increment: mycounter;
}