伪类选择器

伪类选择器

<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>

结构伪类

• 分组结构伪类:用于选择子类元素,所以应该给他一个查询起点

:nth-of-type()

.list > li:nth-of-type(3) {
  color: bisque;
}
/_ ()内输入要选择的第几个 li 标签_/

:nth-last-of-type() 倒数选择.

第一个标签 可以简写 :first-of-type,最后一个可以写 :last-of-type

.list > :first-of-type {
  color: bisque;
}
/_ 选择第一个 li 标签_/
.list > :last-of-type {
  color: bisque;
}
/_ 选择左后一个 li 标签_/

伪类选择器的参数

:nth-of-type(an+b)

• (an+b)参数

  1. a=0 为选择单个标签
  2. a=1 为选择多个标签
  3. a=-1 为选择前几个标签
  4. a=2 为选择奇数或偶数标签
  5. n 为循环(从 0 开始到最后标签数)
  6. b 为偏移量()

• 匹配单个元素

.list > li:nth-of-type(0n+3) {
  color: bisque;
}
/_ ()内输入要选择的是 "an+b";从n=0开始往下循环.
"0*1+3=3";
"0*2+3=3";(0*2还是=0,再加3最终还是等于3,所以这个a=0,为选择一个标签)
所以可以直接输入3偏移量_/

• 匹配一组

1. 偏移量后面的所有标签 (a=1)

.list > li:nth-of-type(1n+3) {
  color: bisque;
}
/_ ()内输入要选择的是 "an+b" 从n=0开始往下循环;
a=1
"1*0+3=3";
"1*1+3=4";
"1*2+3=5";
"1*3+3=6";
直到循环到最后一个1*6+3=9;
当循环等于9是 li标签没有9个所以最后一个=9的不生效;
选择结果就是3-8的li标签被选中._/

1. 偏移量前面的所有标签 (a=-1)

.list > li:nth-of-type(-n+3) {
 color: bisque;
}
/_ ()内输入要选择的是 "an+b" 从n=0开始往下循环;
"-1*0+3=3";
"-1*1+3=2";
"-1*2+3=1";
"-1*3+3=0";
直到循环到最后一个"-1*3+3=0";
当循环等于0是 li标签没有0个所以最后一个=0的不生效;
选择结果就是1-3的li标签被选中._/

1. 所有奇数的标签 (a=2)

.list > li:nth-of-type(2n+1) {
 color: bisque;
}
/_ ()内输入要选择的是 "an+b" 从n=0开始往下循环;
"2*0+1=1";
"2*1+1=3";
"2*2+1=5";
"2*3+1=7";
选择结果就是1,3,5,7的li标签被选中._/

1. 所有偶数数的标签 (a=2)

.list > li:nth-of-type(2n) {
 color: bisque;
}
/_ ()内输入要选择的是 "an+b" 从n=0开始往下循环;
"2*0+0=0";
"2*1+0=2";
"2*2+0=4";
"2*3+0=6";
"2*3+0=8";
选择结果就是2,4,6,8的li标签被选中._/

表单伪类

<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 标签

• 状态

1. :disabled: 禁用
2. :enabled: 所有 有效的
3. :checked 选中的时候
4. :hover 鼠标悬停
5. :focus 获取焦点

表单选中样式

<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 为表单为选中状态;
    + label   为相邻的 label标签(+ 为相邻的)
 -->