偽類選擇器

<ul class="list">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
  <li>item6</li>
  <li>item7</li>
  <li>item8</li>
  <p>a1</p>
  <p>a2</p>
  <p>a3</p>
</ul>

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

• 分組結(jié)構(gòu)偽類:用于選擇子類元素,所以應(yīng)該給他一個(gè)查詢起點(diǎn)

:nth-of-type()

.list > li:nth-of-type(3) {
  color: bisque;
}
/_ ()內(nèi)輸入要選擇的第幾個(gè) li 標(biāo)簽_/

:nth-last-of-type() 倒數(shù)選擇.

第一個(gè)標(biāo)簽 可以簡(jiǎn)寫 :first-of-type,最后一個(gè)可以寫 :last-of-type

.list > :first-of-type {
  color: bisque;
}
/_ 選擇第一個(gè) li 標(biāo)簽_/
.list > :last-of-type {
  color: bisque;
}
/_ 選擇左后一個(gè) li 標(biāo)簽_/

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

:nth-of-type(an+b)

• (an+b)參數(shù)

  1. a=0 為選擇單個(gè)標(biāo)簽
  2. a=1 為選擇多個(gè)標(biāo)簽
  3. a=-1 為選擇前幾個(gè)標(biāo)簽
  4. a=2 為選擇奇數(shù)或偶數(shù)標(biāo)簽
  5. n 為循環(huán)(從 0 開始到最后標(biāo)簽數(shù))
  6. b 為偏移量()

• 匹配單個(gè)元素

.list > li:nth-of-type(0n+3) {
  color: bisque;
}
/_ ()內(nèi)輸入要選擇的是 "an+b";從n=0開始往下循環(huán).
"0*1+3=3";
"0*2+3=3";(0*2還是=0,再加3最終還是等于3,所以這個(gè)a=0,為選擇一個(gè)標(biāo)簽)
所以可以直接輸入3偏移量_/

• 匹配一組

1. 偏移量后面的所有標(biāo)簽 (a=1)

.list > li:nth-of-type(1n+3) {
  color: bisque;
}
/_ ()內(nèi)輸入要選擇的是 "an+b" 從n=0開始往下循環(huán);
a=1
"1*0+3=3";
"1*1+3=4";
"1*2+3=5";
"1*3+3=6";
直到循環(huán)到最后一個(gè)1*6+3=9;
當(dāng)循環(huán)等于9是 li標(biāo)簽沒有9個(gè)所以最后一個(gè)=9的不生效;
選擇結(jié)果就是3-8的li標(biāo)簽被選中._/

1. 偏移量前面的所有標(biāo)簽 (a=-1)

.list > li:nth-of-type(-n+3) {
 color: bisque;
}
/_ ()內(nèi)輸入要選擇的是 "an+b" 從n=0開始往下循環(huán);
"-1*0+3=3";
"-1*1+3=2";
"-1*2+3=1";
"-1*3+3=0";
直到循環(huán)到最后一個(gè)"-1*3+3=0";
當(dāng)循環(huán)等于0是 li標(biāo)簽沒有0個(gè)所以最后一個(gè)=0的不生效;
選擇結(jié)果就是1-3的li標(biāo)簽被選中._/

1. 所有奇數(shù)的標(biāo)簽 (a=2)

.list > li:nth-of-type(2n+1) {
 color: bisque;
}
/_ ()內(nèi)輸入要選擇的是 "an+b" 從n=0開始往下循環(huán);
"2*0+1=1";
"2*1+1=3";
"2*2+1=5";
"2*3+1=7";
選擇結(jié)果就是1,3,5,7的li標(biāo)簽被選中._/

1. 所有偶數(shù)數(shù)的標(biāo)簽 (a=2)

.list > li:nth-of-type(2n) {
 color: bisque;
}
/_ ()內(nèi)輸入要選擇的是 "an+b" 從n=0開始往下循環(huán);
"2*0+0=0";
"2*1+0=2";
"2*2+0=4";
"2*3+0=6";
"2*3+0=8";
選擇結(jié)果就是2,4,6,8的li標(biāo)簽被選中._/

表單偽類

<input type="text" disabled />
<input type="text" enabled />
<style>
  input:disabled {
    background-color: rgb(206, 20, 20);
  }
    input:enabled {
    background-color: rgb(145, 199, 27);
</style>

input 標(biāo)簽

• 狀態(tài)

1. :disabled: 禁用
2. :enabled: 所有 有效的
3. :checked 選中的時(shí)候
4. :hover 鼠標(biāo)懸停
5. :focus 獲取焦點(diǎn)

表單選中樣式

<input type="text" disabled />
<input type="text" />
<input type="text" />
<br />
<p></p>
<input type="radio" name="sex" value="0" /><label for="m">男</label>
<input type="radio" name="sex" value="1" /><label for="f">女</label>
<style>
  input:checked + label {
    color: rgb(15, 216, 58);
  }
</style>
<!-- input:checked 為表單為選中狀態(tài);
    + label   為相鄰的 label標(biāo)簽(+ 為相鄰的)
 -->

批改老師：PHPz

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

老師批語(yǔ)：